LESS初探

1. 安装less

　　$ npm install -g less

2. less文件编译成css文件

　　$ lessc styles.less styles.css

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Less_Test</title>
 6     
 7     <link rel="stylesheet" type="text/css" href="style.css" />
 8     <link rel="stylesheet" type="text/css" href="self.css" />
 9 </head>
10 <body>
11     <h1>开始</h1>
12     <h2>未结束</h2>
13     <div id="content">
14         
15     </div>
16     <a href="#">链接</a>
17     <div id="home"> 
18          <div id="top">top</div> 
19          <div id="center"> 
20              <div id="left">left</div> 
21              <div id="right">right</div> 
22          </div> 
23      </div>
24 </body>
25 </html>

/*此处为编译后的css文件*/

 1 h1,
 2 h2 {
 3   color: red;
 4 }
 5 #content {
 6   width: 200px;
 7   height: 200px;
 8   background-color: green;
 9   border-radius: 50%;
10 }
11 a {
12   color: red;
13   text-decoration: none;
14 }
15 a:hover {
16   color: black;
17   text-decoration: underline;
18 }
19 #home {
20   color: blue;
21   width: 600px;
22   height: 500px;
23   border: outset;
24 }
25 #home #top {
26   border: outset;
27   width: 90;
28 }
29 #home #center {
30   border: outset;
31   height: 300px;
32   width: 90%;
33 }
34 #home #center #left {
35   border: outset;
36   float: left;
37   width: 40%;
38 }
39 #home #center #right {
40   border: outset;
41   float: left;
42   width: 40%;
43 }

/*此处为编译前的less文件*/

 1 @article: red;
 2 @bgcolor: yellow;
 3 .round(@radius:5px) {
 4     border-radius: @radius;
 5 }
 6 h1,h2 {
 7     color: @article;
 8 }
 9 
10 #content {
11     width: 200px;
12     height: 200px;
13 
14     @bgcolor: green;
15 
16     background-color: @bgcolor;
17     .round(50%);
18 }
19 
20 a {
21     color: red;
22     text-decoration: none;
23     &:hover {
24         color: black;
25         text-decoration: underline;
26     };
27 }
28 
29 #home {
30     color: blue;
31     width: 600px;
32     height: 500px;
33     border: outset;
34 
35     #top {
36         border: outset;
37         width: 90;
38     }
39 
40     #center {
41         border: outset;
42         height: 300px;
43         width: 90%;
44         #left {
45             border: outset;
46             float: left;
47             width: 40%;
48         }
49         #right {
50             border: outset;
51             float: left;
52             width: 40%;
53         }
54     }
55 }

参考链接：1. http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/index.html

　　　　　2. http://lesscss.org/