最近更新: 2013-12-12

Sass 簡介

Sass - http://sass-lang.com/。 Sass 是什麼?

Sass 是為了簡化 CSS 文件的重覆內容而設計的擴充語言。這不是 W3C 正式的語法規格,而是 Sass 設計者自定的。相同目的者還有 LESS 。這些擴充語言存在語法差異。

Sass 同時也是指將 Sass 語言轉譯為正規 CSS 語言的工具。

我論 Sass 的設計源由

我先說一件嚴苛的事實。雖然 CSS 已經出現超過15年了 (CSS1 是1996年公開的)。但長久以來,一直不曾出現視覺化的 CSS 編輯工具。設計者始終都是用 CSS 語言,透過文字描述他們腦海中的設計樣式。不幸的是,除了程式設計師,大部份設計者更習慣以圖像描述他們的設計,而不是文字。就此看來,程式設計師其實更像是劇本作家,英文名詞 scriptwriter 或 programmer 的原始意涵已經說明了這一點。如果你不是查英漢字典時只看第一個中文解釋的人,應該知道這點。

W3C 大概也沒想過這麼多年來,設計者都沒有圖像式的 CSS 設計工具可用,所以 css 文件內容一直都充斥著重複性的文字。例如觸目可及的 background-color, font-size 等。理想中應該由圖像式設計工具存檔時產生的 css 文件,實際上幾乎都是人工撰寫而來。

既然理想中的設計工具遙不可見,那就先想辦法簡化人工抄寫的工作吧。於是 Sass 就冒出來了。它擴充了 CSS 語法,讓設計者可以用更少的文字描述樣式內容。由於 Sass 不是正式的語法規格,得不到正統的 CSS 呈像工具,如瀏覽器的直接支持,故它還必須提供一套轉譯工具,將 Sass 語言轉成正式的 CSS 語言。

如何使用

使用 Sass 時,我們必須做兩件事:

  1. 學習 Sass 語言。喔,對了,你要先學 CSS 語言。
  2. 安裝 Sass 的轉譯工具。工具有很多選擇,請參考此「Install Sass」列表。

Sass 是由 Ruby 的使用者開發出來的。所以對 Ruby on Rails 社群來說,比較有親和感。 不過它並不限定要搭配 Ruby on Rails 。時至今日,它也有不少 GUI 轉譯工具。這些工具有些並不需要安裝 Ruby 。

Sass 語法摘要

以下範例主要取自「Sass Basics」。 說明是我自己寫的,表達方式跟 Sass Basics 相反。我先說 CSS 使用現況,再說 Sass 改變了什麼。

變數

變數用法非常簡單,任何一個 shell script/PHP 使用者都能一眼理解。就是用 $ 符號。如下:


$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

轉譯為 CSS 後,在 body 樣式宣告中的 $font-stack$primary-color 就會替換為實際的值。


body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
巢狀結構

XML/HTML 具有巢狀結構,但 CSS 用於描述巢狀結構樣式的形式卻是平面的。如下:


nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Sass 則加入了巢狀描述語法,所以上述的 CSS 內容可以改寫成下列 Sass 內容:


nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
Mixins

Mixins 可以理解為巨集(macro)。最常見的應用就是處理像 border-radius 這類屬性。

基於歷史因素,定義邊角圓弧半徑時,我們習慣前綴瀏覽器代碼。所以定義一個 border-radius 屬性時,我們往往要寫 5 行。如下:


.box1 {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

.box2 {
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  border-radius: 15px;
}

使用 Sass 的 Mixins 就可以簡化為一行。首先用 Sass 關鍵字 @mixin 定義一個巨集 border-radius 且代入一個半徑參數:$radius,內容如下:


@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
}

套用 border-radius($radius) 這個 mixin ,原本的樣式內容就可簡化為:


.box1 { @include border-radius(10px); }

.box2 { @include border-radius(15px); }
繼承樣式類別

CSS 的樣式類別,只用於分類視覺元件,它本身不具繼承性。所以我們以前要這麼寫:


.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

HTML 部分:


<p class="message success">
成功訊息
</p>

<p class="message error">
錯誤訊息
</p>

<p class="message warning">
警告訊息
</p>

Sass 則允許用關鍵字 @extend 繼承樣式類別,所以可改寫:


.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;    
  /* 繼承 .message 所定義的 border 1px, padding 10px, color #333 內容 */
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;sssssssssssssssssss
  border-color: yellow;
}

而 HTML 的部份則可以改寫為:


<p class="success">
成功訊息
</p>

<p class="error">
錯誤訊息
</p>

<p class="warning">
警告訊息
</p>

注意,使用這個功能時,可能會影響到某些 JavaScript UI 框架的運作。因為有些框架會利用 CSS 類別分辨視覺元件的用途甚至修改它的行為。對那些框架來說,一個視覺元件上套多個 CSS 類別是正常的。例如原本的 HTML 的 3 個 p 段落的 CSS 類別都套了 message ,那些框架就知道這 3 個 p 的用途是表達軟體訊息。改寫後少了 message 類別,那些框架就分不出這 3 個 p 和其他的 p 有何不同了。當然你也可以不改 HTML 。

更多語法請參考 Sass 網站/

需要用嗎?

Sass 得不到瀏覽器的直接支持,是使用上最大的不便。對設計者來說,還要從網站規模來決定值不值得用。如果你要設計的是 single-page application ,那基本上不需要用 Sass 。

當你發現你的 CSS 文件分成好幾份,或者有幾百個樣式定義,而你每次修改都要做大量的搜尋與複製貼上工作時,你或許需要 Sass 或 LESS 這類工具。

樂多舊網址: http://blog.roodo.com/rocksaying/archives/26056578.html