LESS笔记

1.安装

电脑上已经安装有node.js

       打开命令行

输入 npm install –g less

 

2.配置webstrom

Files→ settings → tools → file watchers

点击“+”号按钮找到刚才安装的lessc.cmd文件选项点击添加

  

配置输出路径：

Output paths to refresh：

$ProjectFileDir$\css\$FileNameWithoutExtension$.css

3.语法：

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

(2)CSS只支持多行注释；Less支持多行/单行注释，单行注释不会被编译到CSS中去

(3)Less支持变量（Variable）：

语法：  @变量名: 值;

使用：  color: @变量名;

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

(4)变量和常量可以进行四则算术运算

如： +  -  *  /  %

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

.选择器1 { ... }

.选择器2 { 

....

        .选择器1;

        ...

}

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

.选择器1(@变量名1, @变量名2) { ... }

.选择器2 { 

        ....

        .选择器1(值1， 值2);

        ...

}

(7)Less支持样式嵌套

选择器1 {

        ...

        选择器2 {

               ....

        }

}

编译后的结果：

选择器1 {  ...  }

选择器1  选择器2 { .... }

(8)Less提供了几十个实用function，用于编写样式

image-width(url)            返回指定图片的宽

       image-height(url)          返回指定图片的高

ceil()         向上取整

floor()        向下取整

round()     四舍五入取整

lighten(color,  30%)      返回一个变浅后的颜色

darken(color,  30%) 返回一个变深后的颜色

(9)Less支持文件包含

CSS中也支持文件包含——不推荐使用——增加文件请求次数！

Less中的文件包含推荐使用——在服务器端把被包含的文件组成一个大的CSS文件，客户端只要请求一次即可。

 Bootstrap的源代码分为多个.less文件，最终由bootstrap.less统一包含到一个文件中，生成 bootstrap.css！