JAVASCRIPT網頁應用程式設計

附錄 B

CSS 擴充模組

CSS 擴充模組 Less（

http://lesscss.org

）的作者 Alexis Sellier，是這麼形容它的：「這是

一套以 CSS 語法為基礎，所開發的動態樣式表語言」。Less 提供了許多 CSS 沒有的功

能，像是：變數、混入（mixins）、運算式，和巢狀樣式規則。

Less 最棒的一點，就是可以幫我們減少需要撰寫的 CSS 數量（特別是 CSS3 裡，有一

堆需要針對不同瀏覽器特別撰寫的樣式規則）。你可以先寫好 Less 檔案，再將它編譯成

CSS 檔案。

例如，像這樣的 CSS：

.panel {

background: #CCC;

background: -webkit-gradient(linear, left top, left bottom, from(#FFF),

to(#CCC));

background: -moz-linear-gradient(top, #FFF, #CCC);

}

可以用 Less 改寫成這樣：

.panel {

.vbg-gradient(#FFF, #CCC);

}

變數

如果想要重複使用顏色和其他 CSS 規則屬性值，可以利用 Less 的變數，將它們集中設

定於某處。如果日後想要修改的話，就不用一個個找出來置換了！

217

266

|

附錄 B

宣告變數的做法很簡單：

@panel-color: #CCC;

宣告好變數後，就可以在 CSS 樣式裡使用它：

header {

color: @panel-color;