浅谈 less

css预处理语言

•     less
•     stylus
•     sass

变量

    @color:red;
h1{color:@color;}

嵌套

    ul{
   color:red;
   li{  line-height:48px;
      a{text_decoration:none
         &:{color:#f70;}
       }
   }
}

运算

    @w:10;
.s1{padding:@w*2;}
.s2{padding:@w+10px;}

转义

  @str :~".block .span"
@{str}{
   color:red;
}

    @b : ~"1px solid red";
    .test{
border:@b;
}

内置函数

    lighten(color,20%)  变亮

引用与映射

    .border(){
  border:1px solid red;
  padding:20px
}
    .test{
  .border();
}
    .test{
  border:.border[border];
  padding:.border[padding]
}

作用域

    @color:red;
.test{
  @color:blue;
  .block{color:@color}
}

注释

    // 会隐藏
    /* css注释 */

导入

    @import  "xxx.less"
    @import  "xxx.css"