首页 > 代码库 > Css预处理器---Less(三)

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

2024-10-16 05:52:39   214人阅读

 四、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"

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


联系
我们