Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量、混合、函数等特性，使CSS更易维护和扩展。
Less的官方网站有
英文：http://www.lesscss.org/
中文：http://www.lesscss.net/
Less只有让编译才能被浏览器解析；Less的编译软件有好多：
1：Koala，国人开发的全平台的Less编译工具 网站：http：//koala-app.com/
2：WinLess，Windows下的Less编译软件 网站：http：winless.org
3：CodeKit，MAC平台下的Less编译软件 网站：http：incident57.com/codekit/index.html
其中Koala，个人感觉很好用，国人开发，都是中文。
一 嵌套：
原CSS代码
.conten ul{
list-style:none;
}
.conten li{
height:25px;
line-height:25px;
paddling-left:15px;
background:url('arr.jpg');
}
.conten li a{
text-decoration:none;
color:#333
}
Less代码
.conten{
ul{
list-style:none;
}
li{
height:25px;
line-height:25px;
paddling-left:15px;
background:url('arr.jpg');
a{
text-decoration:none;
color:#333;
}
}
}
二 Less的注释
less的注释有两种一个是 //注释，一个是/* * /注释，其中//的注释不会编译到CSS当中，只有/**/才会被编译到CSS当中。
三 变量
定义变量的话，它有许多定义变量的东西，
1 普通变量
普通变量定义方式@
Less写法：
@blue:#5b83ad;
header{
color:@blue;
}
编译结果
header{
color:#5b83ad;
}
注意变量只能声明一次，他们都是“常量”；
2 作为选择器和属性名
使用时将变量以@{变量名}的方式使用，意思说是他可以当做CSS的选择器，Less代码：
@mySelector:width;
@{mySelector}{
@{mySelector}:960px;
height:500px;
}
编译之后CSS代码
.width{
width:960px;
height:500px;
}
3 作为URL
就先比如百度的LOGO的，百度的LOGO是https://www.baidu.com/img/bdlogo.png，使用时，使用“”把变量的值扩起来，它同样是以@{变量名}的方式使用，Less的代码
@imgurl:"https://www.baidu.com/img/"
header{
background:url("@{imgurl}bdlogo.png");
}
4 延迟加载
什么是延迟加载，延迟加载就是声明的变量是延迟加载的，在使用前不一定要预先声明，就像JS中var变量提升一样，你的变量在之前声明还是之后声明是没有任何变化的。
二 混合
1: 基本的混合
混合就是一种将一系列属性从一个规则集引入(混合)到另一个规则集的方式，简单来说，就是在CSS中定义一个类，这个类能干什么呢，这个类可以写一些可重用的属性，Less代码：
.borderred{
border-top:dotted 1px black;
border-bottom:solid 2px black;
}
header{
font-size:20px;
.borderred;
}
footer{
font-size:30px;
.borderred;
}
CSS代码是
header{
font-size:20px;
border-top:dotted 1px black;
border-bottom:solid 2px black;
}
footer{
font-size:30px;
border-top:dotted 1px black;
border-bottom:solid 2px black;
}
2 ： 不带输出的混合
什么是不带输出的混合，其实和上面差不多，上面代码在编译CSS的时候，会把你定义的类也编译出来，然后我们只用在你定义类的后面写上一个()就可以啦，就像是这样 .borderred();
3：带选择器的混合
什么是带选择器的混合，就是这个类有一个伪类的属性，而这个类里面的自己，也就是JS里面的this，这个this写成&符号。Less代码：
.my-hover-mixin(){
&:hover{
border:1px solid red;
}
}
button{
.my-hover-mixin;
}
编译之后的代码是
buttom:hover{
border:1px solid red;
}
4 ：带参数的混合
什么是的带参数的混合，简单的来说就是JS的function封装，可以进行传参数。Less代码
.border(@color){
border:2px solid @color;
}
h1{
&:hover{
.border(green);
}
}
h2{
&:hover{
.border(#000);
}
}
编译之后CSS的代码
h1:hover{
border:2px solid green;
}
h2:hover{
border:2px solid #000;
}
5：带参数并且有默认值
这又是什么，这其实就是说如果这个混合没传参数，是有默认值的，如果传了参数就是传的参数，怎么写呢。Less代码：
.border(@color:#000){
border:2px solid @color;
}
h1{
&:hover{
.border();
}
}
h2{
&:hover{
.border(#666);
}
}
编译之后的CSS代码
h1:hover{
border:2px solid #000;
}
h2:hover{
border:2px solid #666;
}
6：带多个参数的混合
什么是带多个参数的混合，一个组合可以带多个参数，参数之间可以用逗号或者分号分割，但是推荐使用分号分割，因为逗号符号有2个意思，它可以解释为mixins参数分隔符或者CSS列表分隔符。官网是这样说的：
1：两个参数，并且每个参数都是逗号分割的列表：.name(1,2,3;something,ele)
2：三个参数，并且每个参数都包含一个数字：.name(1,2,3)
3：使用伪造的分号创建mixin，调用的时候参数包含一个逗号分割的CSS列表：.name(1，2，3；)，
4：逗号分割默认值：.name(@param1：red，blue)
Less代码：
.mixin(@color;@padding:xxx;@margin:2){
color:@color;
padding:@padding;
margin:@margin @margin @margin @margin;
}
.divaize{
.mixin(1,2,3;something,ele;12)
}
.divaize{
.mixin(1,2,3)
}
编译的CSS代码：
.divaize{
color:1,2,3;
padding:something,ele;
margin:12 12 12 12;
}
.divaize{
color:1;
padding:2;
margin:3 3 3 3;
}
简单点来说，就是如果传参的括号里面全部都是以“，”分割，那么会依次传给各个参数值，
如果传参的括号里面既有“，”又有“；”那么，会把“；”前面的看作一个整体，传给一个值。
7：命名参数
命名参数就是引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值。任何参数都已通过它的名称来引用，这样就不必按照任意特定的顺序来使用参数Less代码：
.mixin(@color:black;@margin:10px;@padding:20px){
color:@color;
margin:@margin；
padding:@padding;
}
.class1{
.mixin(@margin:20px;@color:#33acfe);
}
.class2{
.mixin(#efca44;@padding:40px);
}
编译之后的CSS代码
.class1{
color:#33acfe;
margin:20px;
padding:20px;
}
.class2{
color:#efca44;
margin:10px;
padding:40px;
}
8：@arguments变量
@arguments变量代表是所有的可变参数，注意@arguments；代表所有可变参数是，参数的先后顺序就是你的()内的参数的先后顺序，值的位置和个数也是一一对应的，只有一个值，把值赋值给第一个，两个值，赋值给第一个和第二个，三个值，分别赋值给第三个......以此类推，但是需要主要的是假如我想给第一个和第三个赋值，你不能写(值1，，值3)，必须把原来的默认值写上去。
9：匹配模式
匹配模式：传值的时候定义一个字符，在使用的时候使用这个字符， 就调用这条规则Less代码：
.border(all;@w:5px){
border-radius:@w;
}
.border(t_l;@w:5px){
border-top-left-radius:@w;
}
.border(b_l;@w:5px){
border-bottom-left-radius:@w;
}
//调用Less
.border{
.border(all，50%)；
}
.border{
.border(t_l，50%)；
}
编译CSS代码
.border{
border-radius:50%;
}
.border{
border-top-left-radius:50%;
}
就是说我想用什么样的格式就定义的时候前面加上一个字符，调用的时候也加上这个字符。
10：得到混合的中变量的返回值
你可以将混合中的值进行运算，得到你想要的一个值。Less代码
@.average(@x,@y){
@average:((@x + @y)/2)
}
div{
.average(16px,50px);
padding:@average;
}
编译之后CSS代码
div{
padding: 33px;
}
三：运算
运算的说明：任何数值，颜色和变量都可以进行运算。
Less会为你自动推断数值的单位，所以你不必每一个值都加上单位，注意：运算符与值之间必须以空格分开，涉及优先级时以()进行优先级运算Less运算：
.wp{
width:450px + 450;
}
编译结果：
.wp{
width:900px;
}
颜色值运算时，Less在运算时，先将颜色值转换为rgb模式，然后在转换为16进制的颜色值并且返回。Less代码：
.content{
background:#000000 + 21;
}
编译之后的CSS：
.content{
background:#212121;
}
注意：既然是转换为rgb的取值范围是0-255，所以我们计算的时候不能超过这个区间，超过后默认使用最大值255。
四：命名空间
将一些需要的混合组合在一起，可以通过嵌套多层id或者class实现！Less代码：
#bgcolor(){
background:#fff;
.a{
color:#888;
&:hover{
color:#ff6600
}
.b{
background:#ff0000;
}
}
}
.bgcolor1{
background:#fdfee0;
#bgcolor > .a;
}
.bgcolor2{
#bgcolor > .a>.b;
}
CSS代码
.bgcolor{
background:#fdfee0;
color:#888;
}
.bgcoloe:hover{
color:#ff6600;
}
.bgcolor{
background:#ff0000;
}
其中里面的>就和CSS中的子选择器一样，可以省略或者换成空格，效果是一样的。
678
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
