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