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%);     // 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>
posted @ 2014-04-11 09:43  技术狂  阅读(2459)  评论(0)    收藏  举报