最近都有接觸到 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 之憂。
less的好處就是他可以在client端執行