SASS 動手做

想學但觀望了好久,看再多文章沒動手,也只是假裝自己懂,實際練習才會變成自己的知識跟能力,行動力已經快被殺光了,最近終於有些動能重新舉起鍵盤打打字…

SASS 是 ruby 寫的一種 css 框架,可以讓你用程式化的方式寫 css 而不是最原始條列式的寫一大堆亂七八糟(欸 好像是寫的人造成的)..,除了整理外也方便處理 CSS3 跨瀏覽器的差異,大概就是從 C 到 C++ 這種感覺,多一些方式(物件導向)跟邏輯的整理你的程式。只是 css 本來就只是樣式表,程式性就比較弱,所以加上 SASS 也就是延伸了一些變數、引入、擴充的概念可以用(大概是程式設計師的浪漫?..什麼都想要像是程式)

實際運作上他就像是一個前置處理器幫你把 SASS 轉成 css 可以被瀏覽器載入,所以要多一個編譯的程序,開發上比較搞剛,但是工具都已經傳好好了,只是要試著多學習一些軟體的概念..有點討厭>///<耶。

環境

 $ apt-get install ruby # 魯比
 $ gem install sass # 沙士
 $ gem install compass # 基於 sass
 $ gem insatll susy # 基於 compass

以 ubuntu 為例子,先裝 ruby 再透過 ruby 的套件管理工具 gem 安裝,實際要寫就只要裝 sass 就好,只是另外再裝 compass 跟 susy 等下可以一起玩。其實只要裝 susy,因為相依性的關係就會全部都裝起來,分開看可以比較知道套件相依性。

SASS or SCSS

要開始寫之前會遇到令人困惑的問題,SASS ? SCSS ? 這兩個東西怎麼交互的出現在文件上,到底有什麼不一樣,要用什麼寫勒?以下的範例是 sass 跟 scss 的差異,你可以自己決定要用什麼格式寫,所以這邊有點會混淆的概念是 SASS 可以代表這隻編譯 SASS and SCSS 的程式,也能指再要區分 SASS 跟 SCSS 相異時,副檔名為 sass 的格式。

$font: #fff
$bg: #000

@import compass/reset

body
  background: $bg
  color: $font

SASS 用縮排定義區塊,不用雙引號跟分號。

$font: #fff;
$bg: #000;

@import "compass/reset";

body {
  background: $bg;
  color: $font;
}

SCSS 不能省略分號跟雙引號,用大括號定義區塊,與 css 原生格式較相容。

建立專案

好了準備開始了,透過 compass 工具建立專案,要產生範例檔案有兩種模式一種是 create 另一種是 init,差異在於要不要幫你建資料夾,如果你有專案資料夾了就用 init 沒有就用 create,其實沒什麼差,沒幾個檔案建好了再搬一搬就好。

# ex1: create
$ compass create xd
directory xd/
directory xd/sass/
directory xd/stylesheets/
   create xd/config.rb
   create xd/sass/screen.scss
   create xd/sass/print.scss
   create xd/sass/ie.scss
   create xd/stylesheets/ie.css
   create xd/stylesheets/print.css
   create xd/stylesheets/screen.css
# ex2: init
~ $ mkdir dx;cd dx;
~dx/ $ compass init -x sass
directory sass/
directory stylesheets/
   create config.rb
   create sass/screen.sass
   create sass/print.sass
   create sass/ie.sass
   create stylesheets/ie.css
   create stylesheets/print.css
   create stylesheets/screen.css

config.rb 是設定檔,決定你來源檔案跟編譯目的在哪,來源就是 sass/* 裡面,你搬了位置就要自己改對應的設定,不一定要按照產生出來的範例命名。

stylesheets 就是編譯出來的結果,這幾個檔案內容不是很重要,每次編譯都會重新產生,檔案沒有也沒關係,指定好路徑編譯以後就會重新產生了。剩下設定檔裡面也有指定 images 跟 javascript 就會看如果有使用到需要產生這些資料,就會把產生的資料丟到那。

預設透過 compass 建出來的專案是 scss,而編譯的時候會依照檔案的副檔名是 scss or sass 用不同的方式編譯,所以如果你想用 .sass 寫,就在初始化時加參數 -x sass 來預設產生 .sass 或者自己改副檔名,但是內容也要按照格式稍微調整一下,或者透過下面提到的 sass-convert 來轉換。

編譯

最基本的編譯就是透過 gem 裝的 sass 程式來處理,不用管你的來源是 .sass 還是 .scss 都可以幫你編譯成 css,給前端載入。

$ sass style.sass style.css
$ sass style.scss style.css

如果遇到要轉換 scss <=> sass 的情況,也有一個 sass-convert 的tool 可以用。

$ sass-convert style.sass style.scss
$ sass-convert style.scss style.sass

但是實際開發的時候,程式一直在變阿,手動下指令太累了,所以也有提供一個工具讓你每次編輯完存檔都自動編譯,只是就要開一個程式常駐著。例如把 sass/*.s[ac]ss 都自動編譯輸出到 stylesheets/*.css

$ sass --watch sass:stylesheets

以上都是最基本的 sass 工具使用,但是我們已經有加強版的 compass 了勒~要怎麼用勒,因為多了 config.rb 設定檔都弄好了,就不用自己指定參數了,直接請 compass 大哥幫忙照顧一下,只要指定有 config.rb 的目錄就好了

 $ compass watch ~/dx
>> Change detected at 18:06:03 to: screen.scss
>>> Compass is polling for changes. Press Ctrl-C to Stop.
>>> Change detected at 18:06:12 to: screen.scss
overwrite stylesheets/screen.css
>>> Change detected at 18:07:45 to: screen.scss
overwrite stylesheets/screen.css

SASS

這裡指的是 SASS 這個程式支援的功能,不是特定說是 .sass 這個格式喔 .scss 也一樣。

SASS 的功能可以去官網看介紹,大概有變數(Variables)、巢狀(Nesting)、Partials、Import、Mixins、繼承(Inheritance)、操作(Operators)。

這些功能主要概念就是圍繞著讓樣式可以 reuse,不用寫重複的規則。

有幾個剛開始比較不容易記的紀錄一下差異,

Mixins 像是呼叫函式一樣,定義一個函式在其他地方可以使用,重用的方式就是可以丟參數去套用產生一些會重複使用的規則,定義用 @mixin 呼叫的時候用 @include。跟函式不一樣的地方是他沒有回傳值,比較像是呼叫一個巨集,幫你展開一段程式。

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

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

Inheritance 跟 mixin 有點像,只是沒有參數,只是單純引入另外一個規則集合,例如定義一個 .button,再讓其他不同類型的 .error_button .warning_button 都共用 .button 的一些設定,實際編譯也只是把 .button 改成 .button, .error_button, .warning_button 不會重複產生樣式表,只是用更有邏輯的方式整理。

.button {
  background-color: #fff;
  border-color: #ccc;
}
.error_button {
  @extends .button;
  color: yellow;
}
.warning_button {
  @extends .button;
  color: red;
}

實際上也有 @function 能用,會有回傳值,用來做一些值的運算。

@function grid-width($n) {
  @return $n * 60;
}

.container {
  width: grid-width(5);
}

compass
有了那麼多輔助的語法可以寫 css ,所以我們可以開始寫了嗎?。。

但是實際開發上,我們還是會遇到很多 css3 跨瀏覽器語法實作的不同,各個瀏覽器的預設值也不一樣,寫起來還是亂糟糟的阿~就很像你有了c語言能寫程式了,所以你一大堆函式還是只能自己實作嗎..

丹然需要先 #include stdio.h 拉~,只是 sass 沒有阿,那只好用上面已經有提到也裝好的 compass 囉~,他就是有一大堆寫好的函式給你呼叫,讓你可以馬上開始生產一些實用的 css..。

從 reference 來看,目前有以下東東能用

  • CSS3:顧名思義,處理 css3 的新屬性跨瀏覽器不同名稱的問題
  • Helpers:一堆輔助函式
  • Layout:幾種排版模式
  • Reset:重置瀏覽器,解決不同瀏覽器初始值不同的問題
  • Typography:字型學?..不知道怎麼解釋
  • Utilities:比輔助函式更具功能性的工具..?

東西實在太多,紀錄幾個比較實用的~

Utilities/Sprites 幫忙合併圖片,並且計算合併後每個圖片的位置設成 css background image position,把圖片放在同一個資料夾,用 compass 跑完以後自動合併成一個檔案而且以圖片名稱產生 class。

例如用 famfamfam 的 icons 產生看看~

@import "compass/utilities/sprites";
@import "../images/icons/*.png";
@include all-my-icons-sprites;

輸出結果會把 icons 接成一張長長的圖,然後下面會有一堆 position 不一樣的 class 可以用

.icons-sprite, .icons-application, .icons-arrow_right_grey, .icons-arrow_right_peppermint, .icons-arrow_right_spearmint, .icons-arrow_right_white, .icons-disk, .icons-help, .icons-image_peppermint, .icons-image_spearmint, .icons-page, .icons-page_peppermint, .icons-page_spearmint, .icons-page_spearmint_down, .icons-page_spearmint_up, .icons-search, .icons-sound_grey, .icons-sound_spearmint, .icons-sound_white {
  background: url('/public/images/../images/icons-sa04922e193.png') no-repeat;
}

/* line 60, ../../../../../../var/lib/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/sprites/_base.scss */
.icons-application {
  background-position: 0 -110px;
}
...

css3 的 Shadow,Border radius 也蠻會用到的阿廝~官網都有範例可以看,好像沒什麼好說的,都點點看吧~

@import "compass/css3";
#box-shadow-custom {
  @include box-shadow(red 2px 2px 10px);
}
#border-radius {
  @include border-radius(25px);
}

susy

如果要做 responsive web design ,這些東西好像還少了一點什麼,雖然我還不太懂,只是想做什麼總是會有對應的工具能用阿,在 sass/compass 的世界可能就是 susy 吧。。

他提供了一套函式,讓你可以設計自己的 grid system,比以往直接套用 grid framework 多了一點彈性,(我都還沒用過..)。

安裝一樣就 gem 裝好以後,記得剛提到 compass 有一個 config.rb 可以設定環境的參數,只要在這個檔案 require “susy”,comapass 編譯時就能支援相關的函式拉~

官方的範例如下,一開始是初始化 grid system 的一些參數,剩下 span-columns 意思就是每一個區塊要佔 grid 要佔多大的空間,2,10 就是說一行有十格他要佔兩格,omega,就是該區塊要靠最右。

$total-columns  : 10;             // a 10-column grid
$column-width   : 4em;            // each column is 4em wide
$gutter-width   : 1em;            // 1em gutters between columns
$grid-padding   : $gutter-width;  // grid-padding equal to gutters

.ag1 { @include span-columns(2,10); }
.ag2 { @include span-columns(6,10); }
.ag3 { @include span-columns(2 omega, 10); }
.ag4 { @include span-columns(3,6); }
.ag5 { @include span-columns(3 omega,6); }
.ag6 { @include span-columns(2,6); }
.ag7 { @include span-columns(4 omega,6); }
.ag8 { @include span-columns(2,4); }
.ag9 { @include span-columns(2 omega,4); }
.ag10 { clear: both; }

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *