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