前端语言（LESS）

LESS

环境

参考bootstrap工程

package.json    引入 "grunt-contrib-less"   , "grunt-contrib-watch"

编辑 Gruntfile.js   ，具体参考bootstrap工程

语法

1、变量：  @color0:  #f5f5f5;

2、混合（引用），在一个选择器里面引用另一个选择器，且可以传递参数

.class1{

   .class2(yellow);

   color: @color0;

}

.class2(@color : bleak){     //  选择器可以接收参数，可设置默认参数

    border-color:@color

}

3、匹配模式，选择器的形参里写上模式（可以是常量），用于调用时的匹配：

.class(r, @height : 100px){

     color:read;

}

.class(b @height : 100px){

     color:break;

}

.class(@_, @height : 100px){   //  @_ 表示始终被匹配

     color:break;

}

4、运算，加减乘除，有一些内置函数可以调用

5、嵌套

ul {

   li{

      &:hover{

      }

   }

}

6、避免编译： ~‘表达式’