CSS_LESS 语法/函数详解
嵌套规则
01 |
#header { color : black ; }#header .navigation { font-size : 12px ; |
04 |
}#header .logo:hover { text-decoration : none ; |
07 |
#header { color : black ; .navigation { font-size : 12px ; |
08 |
} .logo { width : 300px ; |
09 |
&:hover { text-decoration : none } |
变量:
2 |
@light-blue: @nice- blue + #111 ; |
3 |
#header { color : @light- blue ; } |
伪类写法:
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 |
04 |
saturate(@color, 10% ); // return a color 10% *more* saturated than @color |
05 |
desaturate(@color, 10% ); // return a color 10% *less* saturated than @color |
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 |
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 |
14 |
mix (@color 1 , @color 2 ); // return a mix of @color 1 and @color 2 |
DEMO_HTML:
谷歌/火狐浏览器适用,IE浏览器不兼容.
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 > |
11 |
< div style = "height:30px;color:#FFF;background-color:#000;" >对照文本颜色</ div > |
原文地址:https://www.cnblogs.com/ranzige/p/3654296.html