四、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 }
五、作用域：
变量遵循向上父级查找原则;#header样式中的color会优先使用#page内部的@var
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"