寫 CSS 最痛苦的是要搞定一堆 browser bugs ,其次就是要面對 CSS 不是 programming language 這現實,不存在其他程式語言常見的 變數、運算、繼承 等概念,使原本簡單的工作變得冗長,並且使維護工作變得麻煩。

less 的出現便是為了解決這個問題:在現有 CSS syntax 的基礎上,為 CSS 加入程式語言的特性,包括變數、scope、nested rules、運算、繼承。

看例子你便會明白:

@brand_color: #F0F;

#container {
div {
color: @brand_color;
border: none; }
p {
color: @brand_color;
 }
}

這例子應該很容易理解吧,相等於以往的:

#container div {
color: #F0F;
border: none;
}
#container p {
color: #F0F;
}

壞消息是,用 less 寫成的檔案需要在 Unix based 的電腦上編譯過後方能變成真正的 CSS;好消息是,有人寫了個小工具 less.app 可以完成這項工作,使不懂得用 terminal 的用戶也能夠使用。在 window 下貌似沒有簡單的解法…

less 官方網站:http://lesscss.org/
less.app (GUI): http://incident57.com/less/