在html中引入

1
2
< link  rel = "stylesheet/less"  type = "text/css"  href = "styles.less" >
< script  src = "less.js"  type = "text/javascript" ></ script >


styles.less

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// 变量
@ color :  #4D926F ;
 
.variable {
   color : @color;
}
 
// 混合
.rounded-corners (@radius:  5px ) {
   border-radius: @radius;
   -webkit-border-radius: @radius;
   -moz-border-radius: @radius;
}
 
#header {
   .rounded-corners;
}
#footer {
   .rounded-corners( 10px );
}
 
// 嵌套规则
#nest {
   h 1  {
     font-size :  26px ;
     font-weight :  bold ;
   }
   p {
     font-size :  12px ;
     a {
       text-decoration :  none ;
       &:hover {
         border-width :  1px
       }
     }
   }
}
 
// 函数 & 运算
@the- border :  1px ;
@base- color :  #111 ;
@red:         #842210 ;
 
#calculate {
   color : @base-color *  3 ;
   border-left : @the-border;
   border-right : @the-border *  2 ;
}
#function {
   color : @base-color +  #003300 ;
   border-color : desaturate(@ red ,  10% );
}


生成css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.variable {
   color :  #4d926f ;
}
#header {
   border-radius:  5px ;
   -webkit-border-radius:  5px ;
   -moz-border-radius:  5px ;
}
#footer {
   border-radius:  10px ;
   -webkit-border-radius:  10px ;
   -moz-border-radius:  10px ;
}
#nest h 1  {
   font-size :  26px ;
   font-weight :  bold ;
}
#nest p {
   font-size :  12px ;
}
#nest p a {
   text-decoration :  none ;
}
#nest p a:hover {
   border-width :  1px ;
}
#calculate {
   color :  #333333 ;
   border-left :  1px ;
   border-right :  2px ;
}
#function {
   color :  #114411 ;
   border-color :  #7d2717 ;
}