less正如其名，起到的作用是写的更少，其与css的关系在我看来可看成是jquery之与JavaScript的关系。
less可以在node和浏览器端运行，相关的运行方法可以看less官方文档，我在编译的时候是用koala这个软件来编译的。实际上less只是为了方便编写，真正使用时还是使用css文件。
将文档拖入后右键点击文档可设置输出路径
接下来只要在less文件上编写，就可以修改输出路径的文档，即真正要使用的css文件。
接下来正式说less的内容
变量
基本使用
在less中，可以使用变量来标记某个样式属性，用法非常简单，less中的变量是用@开头的
@it_color:rgb(255,0,0);
.it{
color: @it_color;
}上面的less代码会编译成下面的css代码
.it {
color: #ff0000;
}看起来好像写多一行比较麻烦，但实际上，如果要总是重复地使用一个相同的样式，将其赋值给一个变量，在修改的时候会更加方便。
@block_color:rgb(255,0,0);
.block1{
color: @block_color;
}
.block2{
color: @block_color;
}
.block3{
color: @block_color;
}
.block4{
color: @block_color;
}像上面的代码，如果我们要修改其中的color样式，在之前的css中，我们要对其一个一个地修改，但使用了less之后，我们只要修改其中的变量@block_color就可以了。
运算
在less中，变量是可以进行运算的
@test_width:200px;
div{
width: @test_width+200px;
}上面的less代码会编译成下面的css代码
div {
width: 400px;
}事实上，在运算中只要变量写了单位，参与运算的值可以不写单位，如果写了其他单位，也会按变量的单位编译。
@test_width:200px;
@test_height:200px;
div{
width: @test_width+200;
height: @test_height+200em;
}上面的less代码会编译成下面的css代码
div {
width: 400px;
height: 400px;
}如上面代码，不管参与运算的值没写单位，或是写了另外的单位em，最后都是按变量的单位px来编译的。而相反，如果变量没写参数，那么就是按参与运算的单位来编译。
@test_width:200;
@test_height:200;
div{
width: @test_width+200px;
height: @test_height+200em;
}上面的less代码会编译成下面的css代码
div {
width: 400px;
height: 400em;
}除了宽高之外，颜色其实也能进行加减，但是很不常用，所以这里就不写出对应代码了。
嵌套
嵌套是less中一个很有用的内容，可以对选择器进行嵌套，和html的嵌套是一样的。
假如现在有下面的html结构
<li>列表
<a href="">链接</a>
<span>提示</span>
</li>我们要给这三个标签的字体使用不同的颜色，按以前的写法要一个一个写，而在less中，可以使用嵌套的写法。
li{
color: black;
a{
color: red;
}
span{
color: blue;
}
}上面的less代码会编译成下面的css代码
li {
color: black;
}
li a {
color: red;
}
li span {
color: blue;
}可以看出使用less的写法写出来更加明确嵌套的关系。除此之外，嵌套一个很方便的用法是用于伪类选择器的编写。一般在写伪类时我们要写两次选择器，而使用嵌套，可以使用&来将伪类嵌套在对应选择器内。（&代表上一层选择器）
a{
color: black;
&:hover{
color: red;
}
}上面的less代码会编译成下面的css代码
a {
color: black;
}
a:hover {
color: red;
}混合
基本使用
less中可以将一个选择器的样式作为另一个选择器的样式，只要直接将该选择器写入另一个选择器的花括号中即可。
.outer_border{
border: 1px solid rgb(0,0,0);
}
.outer{
width: 200px;
height: 200px;
.outer_border;
}上面的less代码会编译成下面的css代码
.outer_border {
border: 1px solid #000000;
}
.outer {
width: 200px;
height: 200px;
border: 1px solid #000000;
}当然除了类选择器外，id选择器同样可以，只要把“.”换成“#”即可。但是不能直接使用标签的选择器，如下代码会在编译时报错。
.outer{
width: 200px;
height: 200px;
div;
}带括号的混合
如果想把一个选择器的样式混入另一个选择器，又不想该选择器被编译出来，可以在该选择器后面添加括号。
.outer_border{
border: 1px solid rgb(0,0,0);
}
.outer_color(){
color: red;
}
.outer{
.outer_border;
.outer_color;
}上面的less代码会编译成下面的css代码
.outer_border {
border: 1px solid #000000;
}
.outer {
border: 1px solid #000000;
color: red;
}可以看到，虽然将.outer_color的样式混入了.outer，但是.outer_color并没有被编译出来。事实上，在其后添加括号使其不被编译出来并非括号最常用的方法，最常用的是在括号内传入参数。
带参数混合
.outer_style(@color){
width: 100px;
height: 100px;
color: @color;
}
.outer{
.outer_style(red);
}上面的less代码会编译成下面的css代码
.outer {
width: 100px;
height: 100px;
color: #ff0000;
}如上代码，在括号内写入形参@color，在括号内调用该参数@color，在使用时只要在括号内写入样式对应要使用的值即可。通过这种写法，如果我们对于几个元素要使用一些相同的样式，有一些不同，这样写是很方便的。如上面代码中，就可以使几个元素的宽高相同，只是通过传入不同的color使颜色不同，不用多次写出width和height。
多参数混合
当然，参数可以不止一个，在传入多个参数时，参数之间用“;”或“,”隔开，调用时传入的值也是用“;”隔开。
.outer_style(@width;@height;@color){
width: @width;
height: @height;
color: @color;
}
.outer{
.outer_style(100px;200px;red);
}上面的less代码会编译成下面的css代码
.outer {
width: 100px;
height: 200px;
color: #ff0000;
}上面的代码传入多个参数给.outer_style，在调用该选择器样式时也传入了三个参数。
默认参数混合
在带参数的混合中，如果我们希望有的参数默认为一个值，只有在传入准确的值时才变为另一个值，那就可以使用默认参数混合。默认参数混合的形式和ES6中的函数默认参数类似，都是在“声明”的时候在参数位置写出默认值得，不同的是ES6的函数默认参数是用=，而less中是用:。
.outer_style(@width;@height;@color:black){
width: @width;
height: @height;
color: @color;
}
.outer{
.outer_style(100px;200px);
}上面的less代码会编译成下面的css代码
.outer {
width: 100px;
height: 200px;
color: #000000;
}可以看到，上面代码中.outer_style需要传入三个参数，而调用时只传入了两个参数，最后的color使用了@color的默认值black（#000000）。
@arguments参数
@arguments参数类似于JavaScript中函数的arguments参数，可以获得所有的参数.
outer_border(@width;@style;@color){
border: @arguments;
}
.outer{
.outer_border(1px, solid, black);
}上面的less代码会编译成下面的css代码
.outer {
border: 1px solid #000000;
}如上面代码，在调用.outer_border时传入了三个参数，而使用@arguments时就将三个参数赋给了border了。
@rest参数
同样类似于ES6中的rest参数，less中的@rest参数可以获得后面未被获取的值。
.outer_border(@width;@height;@rest...){
width: @width;
height: @height;
border: @rest;
}
.outer{
.outer_border(100px;100px;1px;solid;black);
}上面的less代码会编译成下面的css代码
.outer {
width: 100px;
height: 100px;
border: 1px solid #000000;
}可以看到，100px被显式赋值给@width和@height，而后面传入的值直接给了@rest，所以最后border样式的值为后面传入的那三个参数。
要注意的是，@rest...要写在最后面
模式匹配
less可以通过传入一个值给同名的混合选择器来决定使用哪些样式
.border(out){
border-width: 200px;
}
.border(in){
border-width: 100px;
}
.border(@_){
border-style: solid;
border-color:black;
}
.out{
.border(out);
}
.in{
.border(in);
}上面的less代码会编译成下面的css代码
.out {
border-width: 200px;
border-style: solid;
border-color: black;
}
.in {
border-width: 100px;
border-style: solid;
border-color: black;
}如上面代码，.out传入了out，所以找到了对于border第一个参数为out的样式，in也对应找到了样式，而对于不管传入什么参数都需要的样式，可以使用@_代替该位置。
混合的应用
兼容性处理
在使用css3的样式时，经常为了浏览器的兼容性处理，在样式前面加上前缀，每次都要添加显得很麻烦，如果在前面定义一个处理兼容性的混合，那就很方便了。
.border_radius(@radius){
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
border-radius:@radius;
}
div{
.border_radius(5px);
}上面的less代码会编译成下面的css代码
div {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}如上代码，只要先写好对应需要处理兼容性的样式，在使用该样式时只需对调用该混合选择器并传入参数，就可以节约很多时间了。
扫一扫
4201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
