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.
- apt-get install ruby-full
- apt-get install rubygems
- gem install sass # 會安裝在 /var/lib/gems/1.8 (gem 的安裝目錄)
- 註: SASS 相關 Library 安裝於: /var/lib/gems/1.8/gems/sass-3.1.1, /var/lib/gems/1.8/bin/sass
- ln -s /var/lib/gems/1.8/bin/sass /usr/bin/sass # 到此就完成囉~
- 若有使用 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 程式, 再瀏覽器預覽是否有問題即可, 測試步驟如下:
- vim style.scss # 新增 style.scss 檔案
/* style.scss */
#navbar {
width: 80%;
height: 23px;
} - sass --watch style.scss:style.css # 將 style.scss 轉換成 style.css 檔
- 下述都可看情況使用
- sass --watch ./:stylesheets/compiled # sass 檔 和 css 檔 分開目錄, 這會把目前此目錄底下的 *.sass 檔, compile 完成後, 都放到 stylesheets/compiled/ 下面.
- sass input.scss output.css # 直接 run 產生出 css 檔
- sass --watch input.scss:output.css
- sass --watch app/sass:public/stylesheets
- 輸出格式選擇, 使用壓縮的格式, 詳見: SASS_REFERENCE - output style
- 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; }