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/
时间： 2024-07-30 00:07:37