less简介
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。
编译工具
Node、浏览器和 Rhino 平台都可以。本人使用的则是国人的koala。
less中的注释
分为两种://和/**/
1.//:此种编译后不会出现在css文件中,不编译
2./**/:这种编译后仍会保留,编译
变量
声明格式:@变量名:值;
混合
即可看做将打包好的设置进行复用,例如:
//less 混合
.border1{
width:100px;
height: 100px;
border: 2px green solid;
}//带参混合(参数可多个)
.border2(@border_width:1px){//默认为1px,可以不设
width:100px;
height: 100px;
border: @border_width green solid;
}.box2{
.border2(5px);
}
匹配模式
在混合的基础上可选择同一类的不同设置,下面参考写三角的例子(对于写三角不熟悉的朋友可参考:http://www.tuicool.com/articles/3eaINn)
.triangle{right,@w:5px,@c:#ccc){border-width:@w;border-color:transparent transparent transparent @c;border-style:dashed dashed dashed solid;}
.triangle(@,@w:5px,@c:#ccc){width:0;height:0;overflow:hidden;}//这一行可不设置,@_这个参数表示,使用这个模式的都将默认包含这段代码
.sanjiao{.triangle(right,100px);}//调用
匹配模式-定位,其中参数固定
.pos(r){position:relative;}
.pos(a){position:absolute;}
.pos(f){position:fixed;}
.usepos{width:200px;height:200px;background-color:black;.pos(r);}
运算
less支持加减乘除运算,常用于对长度的设置,也支持颜色的运算
嵌套规则
就是对嵌套的标签,可以嵌套的设置样式,比如:
html中的
<ul class="list"><li>first<a>2017-02-21</a></li></ul>
则less中就可以用这种格式去设置样式了
.list{…;li{…}a{…}}
另外像:hover这类选择器,可以这么用 符号&代表它的上一层选择器
.list{…;li{…}a{…;&:hover{…}}}
避免编译
处理当css中有一些less不认识的语法,或错误的css
格式:~’your code’
例如css3中有calc(),这个less是不认识的,所以可以如:width:~’calc(300px-100px)’;那么在css中就会师这样的width:calc(300px-100px);即避免编译