Css预处理器---Less(三)

四、Color函数

　　1.less提供的颜色运算函数，颜色会被转换成HSL色彩空间,然后再通道级别进行操作,函数如下：

 lighten(@color, 10%);   //return a color which is 10% * lighten* than @color
 darken(@color, 10%);
 saturate(@color, 10%);
 desaturate(@color, 10%);
 fadein(@color, 10%);
 fadeout(@color, 10%);
 fade(@color, 10%);
 spin(@color, 50);
 spin(@color, -10);
 mix(@color1, @color2);

 //使用
 @base : #f04615;
 .class {
   color : saturate(@base, 5%);
   background-color : lighten(spin(@base, 10), 25%);
 }

 //css输出
 .class {
   color: #fc3f09;
   background-color: #f8b78d;
 }

五、作用域：

　　变量遵循向上父级查找原则;#header样式中的color会优先使用#page内部的@var

 //less代码
 @var : red;
 #page {
     @var : white;
     #header {
         color : @var;
     }
 }
 #footer {
     color: @var;
 }

 //css输出
 #page #header {
   color: #ffffff;
 }
 #footer {
   color: #ff0000;
 }

六、注释和Importing

　　(1)注释/*....*/保留注释内容，//不保留注释内容

　　(2)在文件中引入less文件，后缀可带可不带

 //两种写法
 @import "lib.less"
 @import "lib"

 //less文件中导入css文件时，css文件要带后缀名
 @import "lib.css"