動(dòng)態(tài)的樣式表lesscss:簡(jiǎn)單學(xué)習(xí)lesscss語(yǔ)法

發(fā)布時(shí)間：2012-07-06 14:52:09 作者：佚名

lesscss語(yǔ)法的簡(jiǎn)單學(xué)習(xí)

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

lesscss使用方法有兩種：
1.頁(yè)面添加一個(gè) less.js的文件，css使用 style.less 文件后綴來(lái)編寫(xiě)，不過(guò)需要有服務(wù)器的環(huán)境支持
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
2.在服務(wù)器端使用node.js來(lái)編譯，node.js 使用 less的方法如下：
先使用npm包管理器來(lái)安裝
$ npm install less
然后就可以使用命令行來(lái)編譯壓縮less代碼了
$ lessc styles.less > styles.css
下面是一些lesscss的語(yǔ)法：
使用變量

復(fù)制代碼

代碼如下:

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

2.組合

復(fù)制代碼

代碼如下:

// 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.選擇器

復(fù)制代碼

代碼如下:

// 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ù)算

復(fù)制代碼

代碼如下:

// 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寫(xiě)得模塊化，有更好的閱讀性。
首先可以通過(guò) import 講網(wǎng)站的樣式分成 n個(gè)模塊，當(dāng)頁(yè)面需要哪個(gè)模塊就引用哪個(gè)。還可以將css3那些新增的功能定義成類(lèi)庫(kù)，由于有函數(shù)的功能，那些圓角，陰影之類(lèi)樣式只需要定義一次就可以了。講頁(yè)面需要使用到的主要文本，邊框，背景色定義成變量給后續(xù)樣式使用，到時(shí)網(wǎng)站風(fēng)格需要改變，顏色也很好的修改。
我個(gè)人覺(jué)得先階段lesscss的不足有：
1. css3的樣式不能自動(dòng)補(bǔ)全其他瀏覽器的hack。
2.使用nodejs在window系統(tǒng)下的支持不夠，不過(guò)最近剛剛不久發(fā)布了一個(gè)nodejs window版，這方面估計(jì)在不久的將來(lái)會(huì)改善
3.編輯器，ide對(duì)lesscss語(yǔ)法縮進(jìn)支持不夠友好。