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/