less

使用 @ 定义变量
     变量可以做运算
     
     @color : #000;
     @width : 1000px;
     
 使用 & 表示当前类
     .box{
         &:hover{
             color : #000;
         }
     }
 
 css 可以嵌套
 
     ul{
         display : block;
         li{
             float : left;
             a{
                 font-size : 18px;
             }
         }
     }
 
 继承 ： 直接在需要的地方引用 class或者 id 类
 
 .clearfix{
     zoom : 1;
     display : block;
     &:after{
         content: "";
         visibility: hidden;
         clear: both;
         height: 0;
         display: block;
     }
 }
 
 .radius(@radius : 15px){
     border-radius: @radius;
 }
 
 .box{
     .clearfix;
     .radius(10px);
 }
 
 混合 ： 类似 js 中的函数, [或者叫继承]
 .layout(){
     ...
 }
 
 
 作用域 ： 限制继承的条件，可以继承一个 类的部分内容
 
 延伸 ： &:extend(.box); 括号中可以填写多个 类名  编译后的效果就是 css 中的分组
 
 
 when 用来做条件判断
 
 when not 不等于
 
 /*
     使用 isnumber 来判断某个参数是否为 数字
  * */
 
 .border(@width : 1px , @style : solid, @color : #d1d1d1) when (isnumber(@width)){
     border: @width @style @color;
 }
 
 /*
     使用 iscolor 来判断某个参数是否为 颜色
  * */
 
 .border(@color) when (iscolor(@color)){
     
     .border(1px , solid , @color);
 }
 
 
 .border(@solid) when not ( iscolor(@solid)) , ( isnumber(@solid) ){
     .border(1px , @solid);
 }

使用 @ 定义变量变量可以做运算@color : #000;@width : 1000px;使用 & 表示当前类.box{&:hover{color : #000;}}css 可以嵌套ul{display : block;li{float : left;a{font-size : 18px;}}}继承 ： 直接在需要的地方引用 class或者 id 类.clearfix{zoom : 1;display : block;&:after{content: "";        visibility: hidden;        clear: both;        height: 0;        display: block;}}.radius(@radius : 15px){border-radius: @radius;}.box{.clearfix;.radius(10px);}混合 ： 类似 js 中的函数, [或者叫继承].layout(){...}作用域 ： 限制继承的条件，可以继承一个 类的部分内容延伸 ： &:extend(.box); 括号中可以填写多个 类名  编译后的效果就是 css 中的分组when 用来做条件判断when not 不等于/*    使用 isnumber 来判断某个参数是否为 数字 * */.border(@width : 1px , @style : solid, @color : #d1d1d1) when (isnumber(@width)){    border: @width @style @color;}/*    使用 iscolor 来判断某个参数是否为 颜色 * */.border(@color) when (iscolor(@color)){        .border(1px , solid , @color);}.border(@solid) when not ( iscolor(@solid)) , ( isnumber(@solid) ){    .border(1px , @solid);}