嵌套规则
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学习交流
热门图片
猜你喜欢的新闻
新闻热点  2024-04-27 13:35:46
 2024-04-27 13:33:47
 2024-04-24 22:53:44
 2024-04-23 19:32:50
 2024-04-23 19:25:50
 2024-04-23 19:13:19
疑难解答 |
