sass & less

最近都有接觸到 SASS/SCSS 和 LESS 這兩隻 CSS Pre-processor，功能上都是大同小異的，都是用更「Programming」的語法，去處理 CSS。有 Variable、Nesting、Mixins、Inheritance 等等，都使 CSS Code 更簡單易處理，用過的必定愛不釋手。

雖說大同小異，但實作時仍然會有分別，這裏特別說說一些個人經驗。例如專案有用到其他的 CSS Framework 如 jquery-ui 時，想配合這些 CSS Pre-processor 用時，有時會索性將這些檔案直接導入，然後你就可以隨便 extend 這些 CSS Framework 的 class。以 SASS 為例，要首先將 jquery-ui 的 CSS 轉成 SCSS 檔，可用 sass-convert 工具：

sass-convert --from css --to scss 
  jquery-ui-1.8.2.custom.css > _jquery_ui.scss

然後 import

@import "jquery_ui"

在此以前，你寫一件新的元件要 jquery-ui themeable 的，就要寫類似這樣 class 滿天飛的 code:

<div class="banner-box ui-widget ui-corner-all">
    <div class="title ui-widget-header">header</div>
    <div class="content ui-widget-content">
        Lorem ipsum dolor sit amet, consectetur 
        adipisicing elit, sed do eiusmod
    </div>
</div>

用了 SCSS 就可以這樣了：

.banner-box{
    @extend .ui-widget;
    @extend .ui-corner-all;
    border: 1px solid #ccc;
    .title{
        @extend .ui-widget-header;
        font-weight: bold;
        background-color: #eee;
    }
    .content{
        @extend .ui-widget-content;
        color: #333;
    }
}

HTML 就可以變得清減了:

<div class="banner-box">
    <div class="title">header</div>
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur 
        adipisicing elit, sed do eiusmod
    </div>
</div>

對於那些非常不滿如 blueprint 那些 CSS Grid 搞到一地都是 presentational class 的人，應該會相當高興。

LESS 雖然沒有 @extend，但也可以將普通的 CSS 直接導入(改成 .less就可以了)，將那些 class 當是 mixins 使用：

.banner-box{
    .ui-widget;
}

不過問題就在於，要成功導入 less 檔，裏面的 CSS Rule 必需正確，即是說不可以有 hack 出現。當然 LESS 也讓你可以 escape hack (用 ~ prefix)，但若你要導入人家一整個如 jquery-ui 般龐大的 file，難道要自己手動找這些 hack 出來 escape 嗎？這方面 sass-convert 就更勝一籌。

而且 sass 之外，還有更強大的 compass ，已有很多預設配方，如 spriting 、 layout 等等，都能大大免去 developer 之憂。