less

  1   使用 @ 定义变量
   2       变量可以做运算
   3      
  4       @color : #000;
   5       @width : 1000px;
   6      
  7   使用 & 表示当前类
   8       .box{
   9           &:hover{
  10               color : #000;
  11           }
  12       }
  13  
 14   css 可以嵌套
  15  
 16       ul{
  17           display : block;
  18           li{
  19               float : left;
  20               a{
  21                   font-size : 18px;
  22               }
  23           }
  24       }
  25  
 26   继承 ： 直接在需要的地方引用 class或者 id 类
  27  
 28   .clearfix{
  29       zoom : 1;
  30       display : block;
  31       &:after{
  32           content: "";
  33           visibility: hidden;
  34           clear: both;
  35           height: 0;
  36           display: block;
  37       }
  38   }
  39  
 40   .radius(@radius : 15px){
  41       border-radius: @radius;
  42   }
  43  
 44   .box{
  45       .clearfix;
  46       .radius(10px);
  47   }
  48  
 49   混合 ： 类似 js 中的函数, [或者叫继承]
  50   .layout(){
  51       ...
  52   }
  53  
 54  
 55   作用域 ： 限制继承的条件，可以继承一个 类的部分内容
  56  
 57   延伸 ： &:extend(.box); 括号中可以填写多个 类名  编译后的效果就是 css 中的分组
  58  
 59  
 60   when 用来做条件判断
  61  
 62   when not 不等于
  63  
 64   /*
  65       使用 isnumber 来判断某个参数是否为 数字
  66    * */
  67  
 68   .border(@width : 1px , @style : solid, @color : #d1d1d1) when (isnumber(@width)){
  69       border: @width @style @color;
  70   }
  71  
 72   /*
  73       使用 iscolor 来判断某个参数是否为 颜色
  74    * */
  75  
 76   .border(@color) when (iscolor(@color)){
  77      
 78       .border(1px , solid , @color);
  79   }
  80  
 81  
 82   .border(@solid) when not ( iscolor(@solid)) , ( isnumber(@solid) ){
  83       .border(1px , @solid);
  84  } 

查看更多关于less的详细内容...