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