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%);//returnacolorwhichis10%*lighter*than@color
02
darken(@color,10%);//returnacolorwhichis10%*darker*than@color
03
04
saturate(@color,10%);//returnacolor10%*more*saturatedthan@color
05
desaturate(@color,10%);//returnacolor10%*less*saturatedthan@color
06
07
fadein(@color,10%);//returnacolor10%*less*transparentthan@color
08
fadeout(@color,10%);//returnacolor10%*more*transparentthan@color
09
fade(@color,50%);//return@colorwith50%transparency
10
11
spin(@color,10);//returnacolorwitha10degreelargerinhuethan@color
12
spin(@color,-10);//returnacolorwitha10degreesmallerhuethan@color
13
14
mix(@color1,@color2);//returna