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！