SASS 動手做

12/152013

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

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; }

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *