sass & less

最近都有接觸到 SASS/SCSSLESS 這兩隻 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 ,已有很多預設配方,如 spritinglayout 等等,都能大大免去 developer 之憂。

1 個回應

回應

*