嵌套规则
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>
|