Less学习笔记

一、简介
二、编译工具
kaola（推荐）、node.js、浏览器
三、用法
（一）变量
@变量名:值;
（二）混合
将一个包含多个属性的类作为另一个类的子属性集
可以让一个类接收一个变量值
便于“相同属性较多 但部分属性不同”的类的复用
eg .border_radius（@radius:5px）{
-webkit-border_radius:@radius;
-moz-border_radius:@radius;
border_radius:@radius;
}
.radius_test{
width:100px;
height:40px;
background-color:green;
.border_radius(10px);//若无传入参数则默认为5px
}
（三）匹配模式
类似于js中的if 但不完全相同；
应用其他类型时 根据首个参数匹配同名的对应样式
如定义了.triangle（left） .triangle（right）.triangle(top)三个同名类，应用哪个类由匹配决定 类似于c语言中的同名函数的重载

（四）运算

      可以给属性赋变量进行运算后的值
    // 运算的两个对象只要有一个带单位即可
 eg  @test：200px;
       .box{
           width:@test-20*5;      
      }

（五）嵌套规则

   .list{
     width:100px;
     height:100px;
     margin:30px auto;
     li{
         height:30px;
         line-height:30px;
       }
     a{
         float:left;
         //&代表上一层选择器
         &:hover{
           color:red;
         }
      }
     span{
        float:right;
     }
   }

（六）arguments变量（不常用）
@arguments包含了所有传递进来的参数
eg:
.border_arg(@w:30px,@c:red,@xx:solid){
border:@arguments;
}
.test_arguments{
.border_arg(40px);//仅仅修改了w值
}
（七）避免编译、!important
eg:
//避免编译
.test_01{
width:~'cal(300px - 30px)';//当该计算需要由浏览器进行 需要避免在css中计算完成
}
//important常用于调试，
.test_important{
.border_radius()!important;//对应的编译出来的css后面均带有!important
}