Css預處理器---Less(三)
阿新 • • 發佈：2017-07-03
log clas 操作 引入 hsl 色彩 porting less 函數
/* */
四、Color函數
1.less提供的顏色運算函數，顏色會被轉換成HSL色彩空間,然後再通道級別進行操作,函數如下：
1 lighten(@color, 10%); //return a color which is 10% * lighten* than @color 2 darken(@color, 10%); 3 saturate(@color, 10%); 4 desaturate(@color, 10%); 5 fadein(@color, 10%); 6 fadeout(@color, 10%); 7 fade(@color, 10%); 8 spin(@color, 50);9 spin(@color, -10); 10 mix(@color1, @color2); 11 12 //使用 13 @base : #f04615; 14 .class { 15 color : saturate(@base, 5%); 16 background-color : lighten(spin(@base, 10), 25%); 17 } 18 19 //css輸出 20 .class { 21 color: #fc3f09; 22 background-color: #f8b78d; 23 }
五、作用域：
變量遵循向上父級查找原則;[email protected]
1 //less代碼 2 @var : red; 3 #page { 4 @var : white; 5 #header { 6 color : @var; 7 } 8 } 9 #footer { 10 color: @var; 11 } 12 13 //css輸出 14 #page #header { 15 color: #ffffff; 16 } 17 #footer { 18 color: #ff0000; 19 }
六、註釋和Importing
(1)註釋/*....*/保留註釋內容，//不保留註釋內容
(2)在文件中引入less文件，後綴可帶可不帶
1 //兩種寫法 2 @import "lib.less" 3 @import "lib" 4 5 //less文件中導入css文件時，css文件要帶後綴名 6 @import "lib.css"
Css預處理器---Less(三)