less – CSS 本應如此簡單

February 7th, 2010 in Web Design.

寫 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 下貌似沒有簡單的解法…