less基本语法

Less语法学习

  (1)Less支持CSS所有的语法

  (2)Less支持多行/单行注释，但CSS只支持多行注释，所以Less中的单行注释不会被编译到CSS文件

  (3)Less有变量(Variable)的概念

       声明变量：@变量名:  值;

       使用变量： 选择器 {样式:  @变量名;  }

       变量值可以是任意合法的样式值。

  (4)Less可以执行样式/变量的计算

       加、减、乘、除、取余

  (5)Less支持样式的混入(Mixin)

       选择器1 {样式;}

       选择器2 {

              选择器1;

              样式;

       }

(6)Less在样式混入时可以指定参数

       选择器1(@变量, @变量...) {样式;}

       选择器2 {

              选择器1(值, 值...);

              样式;

       }

  (7)Less支持样式嵌套

       选择器1 {

              样式1;

              选择器2 {

                     样式2;

              }

       }

       会被编译为：

       选择器1 {样式1;  }

       选择器1  选择器2 {样式2; }

  (8)Less为样式提供了几十个可用的函数

       ceil( )

       floor( )

       percentage( 5/10 )               // 50%

       round( )

       lighten(@c,  20%)                颜色变淡指定的百分比

       darken(@c,  30%)               颜色变暗指定的百分比

       ....

(9)Less支持文件包含指令

       CSS提供了@import指令，可用于包含其它的CSS文件，但由于会增加请求次数，不推荐使用；

       Less也提供了@import指令，可用于包含其它的Less文件，推荐使用！—— Less的文件包含是在服务器端执行的文件拼合，客户端的一次请求就可以获得所有样式！

       @import  "xx.less";

通过修改Bootstrap的Less源文件实现定制

   定制目标：

  (1)Bootstrap瘦身，删除不必要的样式

       注释掉bootstrap.less中不需要的@import即可

 (2)修改Boostrap默认的样式值，实现粗粒度定制

       修改variables.less中变量的值即可

(3)修改Boostrap组件的细节样式，实现细粒度定制

       修改特定的组件对应的.less文件，如dropdown.less