於 Linux 安裝 與 SASS 簡易使用紀錄

SASS / SCSS 主要的用途, 就是可以用程式的方式來寫 CSS, ex: 變數, for, function 等等.

程式寫完後, 可以指定輸出格式, 輸出成各種不同的樣貌, ex: 壓縮過的 CSS 檔.

SASS 使用後, 可以再搭配 Compass 使用. 簡單說, Compass 是 SASS 的 Framework, 而且有很多前人的 template 可以套用, 不過此篇先不講 Compass.

• 註1: Sass / Compass 都需要 Ruby Gem, 所以需要安裝 rubygems.
• 註2: 此篇是將 SASS 安裝在 Debian / Ubuntu Linux.

SASS 安裝步驟

下述都需要用 Ruby Gem, 所以需要先安裝 rubygems.

1. apt-get install ruby-full
2. apt-get install rubygems
3. gem install sass # 會安裝在 /var/lib/gems/1.8 (gem 的安裝目錄)
4. 註: SASS 相關 Library 安裝於: /var/lib/gems/1.8/gems/sass-3.1.1, /var/lib/gems/1.8/bin/sass
5. ln -s /var/lib/gems/1.8/bin/sass /usr/bin/sass # 到此就完成囉~
6. 若有使用 Vim, 可以安裝 SCSS VIM Plugin

錯誤排除

• 若有下述錯誤訊息:
  • error ./test.sass (Line 2: Invalid CSS after "80%": expected expression (e.g. 1px, bold), was ";")
  • Warning: Unable to load rb-inotify >= 0.5.1. Inotify will be unavailable.
• 解法
  • gem install rb-inotify # 安裝 rb-inotify 即可解決.

SASS 使用

詳細可見此文件: SASS_REFERENCE - Using SASS

步驟順序: 寫 SCSS / SASS 檔案, 再執行 Compile 程式, 再瀏覽器預覽是否有問題即可, 測試步驟如下:

1. vim style.scss # 新增 style.scss 檔案
   

   
/* style.scss */
#navbar {
width: 80%;
height: 23px;
}

2. sass --watch style.scss:style.css # 將 style.scss 轉換成 style.css 檔
3. 下述都可看情況使用
   1. sass --watch ./:stylesheets/compiled # sass 檔 和 css 檔 分開目錄, 這會把目前此目錄底下的 *.sass 檔, compile 完成後, 都放到 stylesheets/compiled/ 下面.
   2. sass input.scss output.css # 直接 run 產生出 css 檔
   3. sass --watch input.scss:output.css
   4. sass --watch app/sass:public/stylesheets
   5. 輸出格式選擇, 使用壓縮的格式, 詳見: SASS_REFERENCE - output style
   6. sass --watch --style compressed style.scss:style.css

SASS 語法

語法可見: SASS_REFERENCE, 在此只有紀錄幾個常用的, 詳細的還是回官方看比較快.

• function
  

  @mixin rounded-top {
$side: top;
$radius: 10px;

  border-#{$side}-radius: $radius;
-moz-border-radius-#{$side}: $radius;
-webkit-border-#{$side}-radius: $radius;
}

• include 拉進來
  

  #navbar li { @include rounded-top; }
#footer { @include rounded-top; }

• extend
  

  原始內容
  .error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border: 1px #f00;
background-color: #fdd;
border-width: 3px;
}
  使用 extend, 可寫成下述:
  .error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}

• Parent References
  

  原始內容
  a {
color: #ce4dd6;
&:hover { color: #ffb3ff; }
&:visited { color: #c458cb; }
}
  Compile 後
  a:hover, a:visited ...

• Arguments 帶額外參數進去
  

  /* style.scss */
@mixin rounded($side, $radius: 10px) {
border-#{$side}-radius: $radius;
-moz-border-radius-#{$side}: $radius;
-webkit-border-#{$side}-radius: $radius;
width: $navbar - width / $items - 10px; # 可以做運算
}

  #navbar li { @include rounded(top); }
#footer { @include rounded(top, 5px); }
#sidebar { @include rounded(left, 8px); }

• 要拉另一個 SCSS 檔的內容, 使用註解 Import.
  

  有兩個 css 檔, style.css 要把 _rounded.scss 的內容拉進來, 要用 import (scss 的檔名前面要有 "_")
  
/* _rounded.scss */
/* style.scss */
@import "rounded";

• Interpolation 全域變數
  

  原始內容
  $name: foo;
$attr: border;
p.#{$name} { #{$attr}-color: blue }
  Compile 後
  p.foo { border-color: blue; }

相關網頁

• 加速開發 CSS 工具: Sass
• SCSS: Sass is a CSS Extension : Nex3
• Compass.app: compile Compass/Sass easily without resorting to command line interface - Compass IDE