一、什么是less
less是一种动态样式语言，属于css预处理语言的一种，它使用类似css的语法，为css赋予了动态语言的特性，如变量、运算、函数等。方便了css的编写和维护。
less可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。
本文记录了开发中最常用的几种less语法。
二、编译工具
浏览器并不认识less格式文件，我们需要使用编译工具将less文件编译成css文件，可以选择kaola这个工具编译。这个工具使用也十分简单，将less文件的目录拖入，然后设置输出路径。然后每次只要保存less文件就可实现编译。
如果使用其他开发工具也可以，比如使用VSCode的话就可以安装less插件easy less实现保存自动编译。因为我使用的就是VSCode编辑器，所以我使用了这个插件做编译处理。
基本使用：
首先新建目录
--images
--style
-- main.less
index.html
编写index.html文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>less编译工具使用</title>
<link rel="stylesheet" href="./style/main.css"> //在这里引入的是编译后的css文件
</head>
<body>
<div id="main"></div>
</body>
</html>
编写mian.less文件:
@charset "utf-8";
#main {
width: 100px;
height: 100px;
background-color: red;
}
保存编译后，在style目录下就会出现main.css文件，这是编译后的文件，我们可以直接使用。
三、less语法
1、注释
less中有两种注释：/**/和//。
使用/**/的注释是会被编译进css文件的，而使用//的注释不会被编译进css文件。
//main.less
@charset "utf-8";
/*我会被编译进css文件*/
//我不会被编译进css文件
//执行编译后的main.css
@charset "utf-8";
/*我会被编译进css文件*/
由于我们应该一般编写和维护less文件，所以我们一般采用第二种注释，无需将注释编译进css文件。
2、变量
less中使用@声明一个变量，和一般程序语言不同的是，@符号与变量之间不能有空格，比如我们要声明一个myWidth这个变量：@myWidth。变量的赋值类似键值对：@myWidth : 200px;
变量的使用：
//less文件
@charset "utf-8";
@myWidth : 200px;
@myHeight : 500px;
#main {
width: @myWidth;
height: @myHeight;
background-color: yellowgreen;
}
3、混合
混合的意思是说可以将less写法与常规的css写法进行混合书写。
css中为某个元素添加样式，首先需要为其添加类名，使用混合则很方便
//less文件
@charset "utf-8";
@myWidth : 200px;
@myHeight : 200px;
#main {
width: @myWidth;
height: @myHeight;
background-color: yellowgreen;
.border
}
.border {
border:3px solid pink
}
在css中我们需要将.border这个类添加到元素的class属性中才能生效。但是在less中，只要将.border加入#main中就可以实现效果。
//编译后的css
@charset "utf-8";
#main {
width: 200px;
height: 500px;
background-color: yellowgreen;
border: 3px solid green;
}
.border {
border: 3px solid green;
}
混合也可以带参数
//less
.border(@mywidth){
border: @mywidth solid green;
}
.mybox {
.border(5px);
}
//css
.mybox {
border: 5px solid green;
}
参数也可以设置一个默认值：
//less
.border(@mywidth:4px){
border: @mywidth solid green;
}
.mybox {
.border();
}
//css
.mybox {
border: 4px solid green;
}
4、匹配模式
根据不同的参数可以匹配不同的样式：
.pos(r) {
position:relative;
}
.pos(a) {
position:absolute;
}
.pos(f) {
position:fixed;
}
.pipei {
width:200px;
height:200px;
background-color:green;
.pos(f); //.pos(r) .pos(a) 传入不同的参数，实现不同的定位方式
}
5、运算
less中可以实现运算，任何数字、颜色或者变量都可以参与运算（+ - * /），运算应该被包裹在括号中。
//less
.border(@mywidth:4px){
border: @mywidth + 5px solid green; //这里的单位可以省略，但是两者必须有一个带单位
}
.mybox {
.border();
}
//css
.mybox {
border: 4px solid green;
}
6、嵌套
嵌套是less中非常有用、高效的语法。
//html
<div id="list">
<li><a href="#">less学习</a><span>2017-11-26</span></li>
<li><a href="#">less学习</a><span>2017-11-26</span></li>
<li><a href="#">less学习</a><span>2017-11-26</span></li>
</div>
在css中如果我们需要对这一html结构的样式进行渲染，就会使用#list、#list li、#list li a、#list li span等选择器。在less中我们有了更简洁的写法：
//less
#list {
width: 600px;
margin: 30px auto;
list-style: none;
padding: 0;
li {
height: 30px;
line-height: 30px;
background-color: pink;
margin-bottom: 5px;
a {
float: left;
}
span {
float: right;
}
}
}
//css
#list {
width: 600px;
margin: 30px auto;
list-style: none;
padding: 0;
}
#list li {
height: 30px;
line-height: 30px;
background-color: pink;
margin-bottom: 5px;
}
#list li a {
float: left;
}
#list li span {
float: right;
}
在less中使用伪类选择器也十分方便：
//less
#list li a {
float: left;
&:hover {
font-size:20px;
}
}
//css
#list li a:hover {
font-size: 18px;
}
7、arguments参数
有时候我们不想单个操作参数，可以使用@argemunts操作参数。
//less
.border_arg(@w:30px,@c:red,@xx:solid){
border:@arguments;
}
.test_arguments{
.border_arg();
}
//css
.test_arguments {
border: 30px red solid;
}
8、避免编译
有时候我们需要输出一些不正确的css语法或者使用一些less不认识的专有语法，要输出这样的值我们需要使用~""将语法包裹起来，语法放在双引号或者单引号中间。从而实现不让less编译该段代码：
//less
width:~'calc(100%-35)'
//css
width: calc(100%-35);
网友评论