lesscss 是動(dòng)態(tài)的樣式表語言，他讓css增加變量，組合，函數(shù)，運(yùn)算等語法。這個(gè)項(xiàng)目的網(wǎng)站在國(guó)內(nèi)訪問不到，大家都懂的。這里只給出地址：http://www.lesscss.org/

lesscss使用方法有兩種：

◆ 頁面添加一個(gè) less.js的文件，css使用 style.less 文件后綴來編寫，不過需要有服務(wù)器的環(huán)境支持

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

◆ 在服務(wù)器端使用node.js來編譯，node.js 使用 less的方法如下：

先使用npm包管理器來安裝

$ npm install less

然后就可以使用命令行來編譯壓縮less代碼了

$ lessc styles.less > styles.css

下面是一些lesscss的語法：

使用變量

// LESS   
@color: #4D926F;     
#header {  
  color: @color;  
}  
h2 {  
  color: @color;  
}  
/* Compiled CSS */    
#header {  
  color: #4D926F;  
}  
h2 {  
  color: #4D926F;  
}  

2.組合

// LESS  
   
.rounded-corners (@radius: 5px) {  
  border-radius: @radius;  
  -webkit-border-radius: @radius;  
  -moz-border-radius: @radius;  
}  
   
#header {  
  .rounded-corners;  
}  
#footer {  
  .rounded-corners(10px);  
}  
/* Compiled CSS */ 
   
#header {  
  border-radius: 5px;  
  -webkit-border-radius: 5px;  
  -moz-border-radius: 5px;  
}  
#footer {  
  border-radius: 10px;  
  -webkit-border-radius: 10px;  
  -moz-border-radius: 10px;  
}  

3.選擇器

// LESS  
   
#header {  
  h1 {  
    font-size: 26px;  
    font-weight: bold;  
  }  
  p { font-size: 12px;  
    a { text-decoration: none;  
      &:hover { border-width: 1px }  
    }  
  }  
}  
   
/* Compiled CSS */ 
   
#header h1 {  
  font-size: 26px;  
  font-weight: bold;  
}  
#header p {  
  font-size: 12px;  
}  
#header p a {  
  text-decoration: none;  
}  
#header p a:hover {  
  border-width: 1px;  
}  

4. 變量預(yù)算

// LESS  
   
@the-border: 1px;  
@base-color: #111;  
@red:        #842210;  
   
#header {  
  color: @base-color * 3;  
  border-left: @the-border;  
  border-right: @the-border * 2;  
}  
#footer {  
  color: @base-color + #003300;  
  border-color: desaturate(@red, 10%);  
}  
   
/* Compiled CSS */ 
   
#header {  
  color: #333;  
  border-left: 1px;  
  border-right: 2px;  
}  
#footer {  
  color: #114411;  
  border-color: #7d2717;  
}  

5. import 外部css

@import "lib.less";  
@import "lib";  

通用引用了lesscss，我們就可以將css寫得模塊化，有更好的閱讀性。

首先可以通過 import 講網(wǎng)站的樣式分成 n個(gè)模塊，當(dāng)頁面需要哪個(gè)模塊就引用哪個(gè)。還可以將css3那些新增的功能定義成類庫，由于有函數(shù)的功能，那些圓角，陰影之類樣式只需要定義一次就可以了。講頁面需要使用到的主要文本，邊框，背景色定義成變量給后續(xù)樣式使用，到時(shí)網(wǎng)站風(fēng)格需要改變，顏色也很好的修改。

我個(gè)人覺得先階段lesscss的不足有：

1. css3的樣式不能自動(dòng)補(bǔ)全其他瀏覽器的hack。

2.使用nodejs在window系統(tǒng)下的支持不夠，不過最近剛剛不久發(fā)布了一個(gè)nodejs window版，這方面估計(jì)在不久的將來會(huì)改善

3.編輯器，ide對(duì)lesscss語法縮進(jìn)支持不夠友好。

原文：http://www.cnblogs.com/qiangji/archive/2011/08/01/lesscss.html

【編輯推薦】

1. 8月8款非常實(shí)用的CSS工具推薦
2. HTML 5和CSS3表單示例和詳細(xì)教程匯總
3. Web設(shè)計(jì)師必備:10款***免費(fèi)CSS在線編輯器
4. 44個(gè)驚人的超炫CSS3動(dòng)畫演示
5. 六月***的HTML 5和CSS3教程強(qiáng)烈推薦