# less（less is more, Than# less（less is more, Than css）

标签（空格分隔）： 实习笔记


---


可以加入变量和运算。
less有多种编译环境，桌面的编译工具：koala编译。node.js库编译。浏览器编译。把less文件编译成css。
**less注释**
>在less中，有两种注释，<pre>/**/和//，前者在编译时会被保留，后者不被编译</pre>


**变量**


>在less里定义变量，用@符号定义，然后就可以用变量了
<pre>
如


@test：300px;


.box{
    width:@test;
    height:@test;
    background-color:#CCC;
}
</pre>


**混合**
>写 css 遇到可以重用的东西，重用样式，在less里的处理方法如下
<pre>
@test：300px;


.box{
    width:@test;
    height:@test;
    background-color:#CCC;
    
    .border;
} 


.box2{
    .box;
    margin-left:100x;
}
//带参数的混合的运用
.test_hunhe{
    .border_02(30px);
}


//带默认值的参数，默认为10，但是有特殊的时候可以在border_03（这里带值）
.test_hunhe_03{
    border_03();
}
.border{
    border:solid 5px pink;
｝


//带参数的混合
border_02(@border_width){
    border:solid #CCC @border_width;
}


//混合，带默认参数
.border_03(@border_width:10px){
    border:solid green @border_width;
}
//混合例子
.border_radius(@radius:5px){
    -webkit-border-radius:@radius;
}
.radius_test{
    width:100px;
    height:40px;
    background-color:green;
    
    .border_radius();
}
//不希望使用默认值
.radius_test2{
    width:100px;
    height:40px;
    background-color:green;
    
    .border_radius(10px);
}
</pre>
**匹配模式**
>相当于 js 中的 if，但不完全是，满足条件才能匹配
<pre>
//用 css 画三角
.sanjiao{
    width:0;
    height:0;
    overflow:hidden;
    
    border-width:10px;
    border-color:red  transparent red transparent;
    border-style:solid;
}


//匹配模式
.triangle(top,@w:5px;@c:#CC){
    border-width:@w;
    border-color:transparent transparent @c transparent ;
    border-style:dashed dashed solid dashed;
}
.triangle(right,@w:5px;@c:#CC){
    border-width:@w;
    border-color:transparent transparent transparent  @c;
    border-style:dashed dashed dashed solid;
}
.triangle(bottom,@w:5px;@c:#CC){
    border-width:@w;
    border-color: @c transparent transparent transparent ;
    border-style: solid dashed dashed dashed;
}
.triangle(left,@w:5px;@c:#CC){
    border-width:@w;
    border-color:transparent  @c transparent transparent ;
    border-style:dashed  solid dashed dashed;
}
//无论匹配谁都必须带上的，比如选了.triangle(top）；可以这样写
.triangle(@_,@w:5px;@c:#CCC){
    width:0px;
    height:0px;
    overflow:hidden;
}
.sanjiao{
    .triangle(top);
}


//匹配模式的定位
.pos(r){
    position:relative;
}
.pos(a){
    position:absolute;
}
.pos(f){
    position:fixed;
}
.pipei{
    width:200px;
    height:200px;
    background-color:green;
    pos(a);
</pre>
**运算**
>less中是可以有运算的
<pre>
@test_01:300px;
.box_02{
    width:test_01+20*5; 
}
</pre>
**嵌套规则**
>当我们写列表性的东西时，可以这样写。但是要尽量少去匹配元素。
<pre>
.list{
    width:600px;
    margin:0;
    padding:0;
    list-style:none;
    
    li{
        height:30px;
        line-height:30px;
        background-color:pink;
        margin-bootom:5px;
        
        a{
            float:left;
            //代表他的上一层选择器
            &：hover{
                color:red;
            }
        }
    }
}
</pre>
**@srguments变量**
<pre>
    .border_arg(@w:30px,@c:red,@xx:solid){
    border:@arguments
    }
   //arguments用例 
    .test_arguments{
        .border_arg();
    }
</pre>
**避免编译**
>有的时候我们会写一些 less 不认识的文字，如滤镜，所以需要避免编译。imporent 
<pre>
//避免编译
    test_03{
       width:~'calc(300px-30px)';
    }
    
//important
.test_important{
    border_radius()!important;
}
</pre> css）