CSS_LESS 语法/函数详解
嵌套规则
01 |
#header { color: black; }#header .navigation { font-size: 12px; |
02 |
}#header .logo { |
03 |
width: 300px; |
04 |
}#header .logo:hover { text-decoration: none; |
05 |
} |
06 |
07 |
#header { color: black; .navigation { font-size: 12px; |
08 |
} .logo { width: 300px; |
09 |
&:hover { text-decoration: none } |
10 |
} |
11 |
} |
变量:
1 |
@nice-blue: #5B83AD; |
2 |
@light-blue: @nice-blue + #111; |
3 |
#header { color: @light-blue; } |
伪类写法:
1 |
a{ |
2 |
color: red; |
3 |
&:hover{color:blue;} |
4 |
&:active{color:green;} |
5 |
} |
COLOR颜色函数:
01 |
lighten(@color, 10%); // return a color which is 10% *lighter* than @color |
02 |
darken(@color, 10%); // return a color which is 10% *darker* than @color |
03 |
04 |
saturate(@color, 10%); // return a color 10% *more* saturated than @color |
05 |
desaturate(@color, 10%); // return a color 10% *less* saturated than @color |
06 |
07 |
fadein(@color, 10%); // return a color 10% *less* transparent than @color |
08 |
fadeout(@color, 10%); // return a color 10% *more* transparent than @color |
09 |
fade(@color, 50%); // return @color with 50% transparency |
10 |
11 |
spin(@color, 10); // return a color with a 10 degree larger in hue than @color |
12 |
spin(@color, -10); // return a color with a 10 degree smaller hue than @color |
13 |
14 |
mix(@color1, @color2); // return a mix of @color1 and @color2 |
DEMO_HTML:
谷歌/火狐浏览器适用,IE浏览器不兼容.
01 |
<!doctype html> |
02 |
<html> |
03 |
<head> |
04 |
<meta charset="UTF-8"> |
05 |
<title>Document</title> |
06 |
<link rel="stylesheet/less" type="text/css" href="less/styles.less" /> |
07 |
<script src="less-1.5.0.min.js" type="text/javascript"></script> |
08 |
</head> |
09 |
<body> |
10 |
<div id="content"> |
11 |
<div style="height:30px;color:#FFF;background-color:#000;">对照文本颜色</div> |
12 |
<h1>这里是标题啦</h1> |
13 |
<h2>内容标题文件</h2> |
14 |
<h3>再一种颜色</h3> |
15 |
<p>一种新颜色</p> |
16 |
</div> |
17 |
<script> |
18 |
less.watch(); //自动刷新 |
19 |
</script> |
20 |
</body> |
21 |
</html> |
