less 学习总结

最近在看less的时候，来总结一下学习的内容,目前很简单能看懂别人写的less，这就够了,学会下面的内容基本够用
①less 可以用Koala来编译
Koala官方网站：http://koala-app.com/
②less中的注释
/*注释内容*/ 会编译
// 不会编译
变量是已@开头定义如：
@test_width:20px;.div_width{    width:@test_width}
③混合
.div_hunhe{width:20px}.div_hunhe1{    height:20px;    .div_hunhe}
③混合带参数
.div_hunhecs(@w){    width:@w;}.div_hunhecs1{    height:20px;    .div_hunhecs(20px);}
④混合带参数，参数带默认值
.div_hunhecsd(@w:20px){    width:@w;}.div_hunhecsd1{    height:20px;    .div_hunhecs();}
⑤不匹配模式
.padding_test(top,@w:10px,@h:10px){    width:@w;    height:@h;    padding-top:0px;}.padding_test(bottom,@w:10px,@h:10px){    width:@w;    height:@h;    padding-bottom:0px;}.padding_test(left,@w:10px,@h:10px){    width:@w;    height:@h;    padding-left:0px;}.padding_test(right,@w:10px,@h:10px){    width:@w;    height:@h;    padding-right:0px;}.pipei{   .padding_test(left); //选择left的样式}
如果需要带个固定的样式不需要在每个匹配样式里写
可以写成
.padding_test(@_,@w:10px,@h:10px){    color:red;}
不管匹配哪个都会带上color:red的样式
⑥运算
@test:10px;
.yunsuan{
width:@test+10;
}
//运算得到宽度等于20px,+ – * /都可以
⑦嵌套规则
.qiantao{    width:20px;    li{        color:red;    }    a{        color:#ccc;    }}
解析成css样式
.qiantao{}.qiantao li{}.qiantao a{}
⑧less不解析
.jiexi{    width:~'300px';}
css中的滤镜等样式不需要less解析，可以使用~''注释为不解析

QQ交流群：136351212
查看原文：http://www.phpsong.com/2180.html