[Hello 2012] 2011 終極一發，3SSS 試閱本搶先看

<div style="position:absolute;width:16em;height:3.5em;border-right:5px solid #339966;border-top:5px solid #339966;border-bottom:5px solid #339966;top:5.5em;left:0;border-radius: 0.8em 0.8em;"></div>

<div style="position: relative; width: 12em;heigth:auto;padding:0.5em auto;">         <code><pre> sass 資料夾</pre></code>     </div>     <div style="position: relative; width: 12em;heigth:auto;padding:0.5em auto;">         <code><pre> sass 執行命令 sass --watch</pre></code>     </div>     <div style="position: relative; width: 12em;heigth:auto;padding:0.5em auto;">         <code><pre> css 資料夾</pre></code>     </div> </div> <figcaption><span>sass 轉換流程</span></figcaption> </figure>

是的，他幫我把 sass 檔案轉成 css 檔案並存放在我們當初所建立的 css 資料夾了。以後你只要編輯 styles.sass 並且存檔，他就會自動將檔案轉換為 css 並放到你指定的資料夾中。沒錯，我們所下的 sass --watch 是屬於監看資料夾的方式，在往後的例子中，我們大多會以這種方式來執行。

1.2.1 資料型態

在我們開始 Sass 之前，我們首先來了解一下他有哪些資料型態，是我們可以使用的。

資料型態就是我們在 Sass 中所設定的變數，變數所指定的數值的型態。

• 數字（number）
  需要留意的地方是，在 Sass 中，有帶單位的數字也是屬於數字型態，例如：100, 10px 都是屬於數字型態。

sass number.sass /* 這裡的 10px 也算是一種數字 padding: 10px auto

• 字串（string）
  字串有三種方式，有加上雙引號，單引號與都不加，如："foo", 'bar', zoo，無論有無引號，字串只要內容相同，則字串的比對都會相同。

sass string.sass /* 設定一組字串  注意字串是否有單（雙）引號  在字串比對中，結果都會是一樣的 $a: "foo" $b: 'foo' $c: foo

• 色碼（color）
  單字詞顏色，與十六進位色碼，或是 rgba() 所組成的值都屬於顏色色碼。

sass color.sass /* 設定一組色碼 $a: #336699 $b: white $c: rgba(200, 100, 125, 0.5)
``` >rgba 是屬於 CSS 3.0 中的顏色屬性設定方式。他是由<em>三原色（RGB 色碼，數值由 0 到 255）</em>與最後一個<em>透明度（數值由 0 到 1）</em>來組成。</p>> 

*   布林值（boolean）
在 Sass 中就只有兩種，true（真） 和 false（假），要注意的是不要跟字串值搞混了。範例中使用 Sass 內建函式 `type-of` 來檢查變數的資料型態。

sass boolean.sass /* 設定一個布林值 請注意不要跟字串值混淆 $a: true $b: "true"

@warn type-of($a) /* 執行結果是布林值 WARNING: bool @warn type-of($b) /* 執行結果是字串 WARNING: string

使用空白或是逗號分隔的一維陣列，例如：1em 5em 3em 2em, "foo" "bar" "zoo"。你也可以把他想成是一種清單式的列表，這個列表中可以混合這五種不同的變數值。

sass list.sass /* 設定一組陣列值 陣列值中可以混雜不同型別的值 $a: true black 1em "foo" foo /* 陣列值也可以混雜另一個陣列值 $b: $a false 10em "foo"

## 1.2.2 變數操作與預設值

以往在撰寫 CSS 時常發生一件事情，那就是某一項設定（例如背景顏色）要修改，結果有上百個項目需要修改。這種時候，我們總是會想，如果有一個東西可以改一次就全部改好，那該有多好。是的，Sass 提供了我們這個方便的東西，就是**變數**。

我們可以把背景顏色設定，都設定成一個叫做 `$bg_color` 的東西，然後，我只要更改 `$bg_color` 這個東西的數值，所有的 CSS 檔案裡的背景顏色設定就一次搞定，這就是變數的好處。Sass 的變數是使用 `$` 符號來開始，如果習慣撰寫 jQuery 或是 PHP 的人應該不陌生。

變數宣告的方式，沒有強制你一定要寫在哪裡。不過，既然是變數，就跟其他的程式語言一樣，也會有變數適用範圍（Scope）的問題。對於原本就是從事程式工作者而言，可能不會覺得有麼問題。不過，這裡還是簡單的說明一下變數適用範圍的狀況。

以最淺顯易懂的方式來說，變數可以簡單的分為**全域**與**私有**變數兩種。前者顧名思義，就是 Sass 檔案中從頭到尾都可以使用，後者則是在某些限定範圍中使用。我們來看一個簡單的例子。

sass sample_scope.sass /* @mixin 是一個函式，而 + 則是叫用這個函式，在後面我們會介紹。 $super 是一個全域變數，他在哪裡都可以直接使用 $private 是一個私有變數，他只能在 @mixin 中使用

$super: "I'm super man"

@mixin my_house() $private: "I'm lucky man" @warn $private @warn $super

@warn "印出 $super 變數" @warn $super @warn "呼叫 my_house 函式" @include my_house()

@warn "印出 $private 變數" @warn $private

$ sass sample_scope.sass WARNING: 印出 $super 變數 on line 12 of sample_scope.sass

WARNING: I'm super man on line 13 of sample_scope.sass

WARNING: 呼叫 my_house 函式 on line 14 of sample_scope.sass

WARNING: I'm lucky man on line 9 of sample_scope.sass, in `my_house' from line 15 of sample_scope.sass

WARNING: I'm super man on line 10 of sample_scope.sass from line 15 of sample_scope.sass

WARNING: 印出 $private 變數 on line 17 of sample_scope.sass

Syntax error: Undefined variable: "$private". on line 18 of sample_scope.sass Use --trace for backtrace.
``` 第一次我們印出 $super 是正常的，然後呼叫 my_house 的時候，接著印出 $super 與 $private 也是正常的。然後，你會發現最後 Sass 會跟你說，你的 $private 變數沒有被定義。是的，我們在 @mixin 以外的地方呼叫了 $private 這個私有變數，所以就會出現錯誤。

這是簡單的說明了變數在全域與私有這兩種不同的環境下，在使用上的差異性。這並不是非常複雜的東西，我們只要理解變數在函式裡面，還是外面，分清楚這兩件事情就可以了。至於變數的命名規則上，並沒有太強迫性的定義，只需要明顯易懂就好。

而預設值 !default 是一個在 Sass 中比較特殊的用法，意思是，當變數被使用，且被賦予值的時候，加上 !default 可以避免原先被賦予的值被修改。何謂避免被修改呢？假設 $foo 已經被給了數值，如果再次的給予 $foo 一個數值時，其自身值會被改寫，如果加上了 !default 則就可以避免這種改寫狀況。

sass sample_default.sass $foo: "The first content." $foo: "The second content." !default $boo: "I'm boy" !default

@warn $foo @warn $boo
``` 則產出的結果會是：
``` WARNING: The first content.          on line 5 of sample_default.sass

WARNING: I'm boy          on line 6 of sample_default.sass
``` 在這個結果當中，你會發現 `$foo` 的數值加上了 `!default` 這個設定，所以，當我們重新賦予值給他的時候，他並不會把原先的數值給取代掉，這就是 `!default` 的作用。也許你會很好奇這樣的東西要放在哪裡，你可以把這種設定想像成一種**預設值**來看待。當我們沒有收到這個變數設定時，就以這個預設值來取代，而當我們有收到變數設定時，就算我已經給了這個預設值，他也不會去改變我們原有的變數設定。


## 1.2.3 插入數值 #{}

既然有了變數，那我們要怎麼把設定好的數值取出來用呢？在 Sass 裡面是使用 `#{$variable}` 的方式將變數值取出。而取出的變數值有幾個我們必須要留意的地方。

*   取出值會自動去除單（雙）引號 *   取出值可以直接與其他數值做相加動作 *   取出值不易直接判斷數值類別 *   與 CSS 的 ID 選擇器混用時，`#` 必須要跳脫 *   使用數值運算與變數運算的輸出結果會不同

數值可以在很多地方做結合，這是 Sass 很方便的地方。加上他會自動移除單（雙）引號，使得我們在使用上有更多的靈活性。例如說，我們可以把樣式屬性與變數值做結合，運算或是用於流程判斷等等。

sass variable_and_value.sass $foo: "black" $boo: 10px

.#{$foo}-type background: #{$foo}

@if #{$foo} == black ## {$foo}-text color: #{$foo} font: #{$boo}/1.2 serif

``` css variable_and_value.css .black-type {   background: black; }

#black-text {   color: black;   font: 10px/1.2 serif; }
``` 以上我們做了三件事情，第一是<em>樣式屬性結合變數值</em>，第二是<em>流程判斷</em>，第三是<em>運算</em>。特別留意的是運算，數值運算並不會真的去做演算動作，而只是把數值輸出而已。我們來看底下這個例子應該會比較明顯。

sass value_calculator.sass $foo: 50px $boo: 30px

@warn $foo/$boo @warn #{$foo}/#{$boo} @warn $foo/#{$boo} @warn #{$foo}/$boo

@warn type-of($foo) @warn type-of(#{$foo})

*    `變數` 除以 `變數`
*    `數值` 除以 `數值`
*    `變數` 除以 `數值`
*    `數值` 除以 `變數`

以下是執行結果：

$ sass value_calculator.sass WARNING: 1.667 on line 4 of value_calculator.sass

WARNING: 50px/30px on line 5 of value_calculator.sass

WARNING: 50px/30px on line 6 of value_calculator.sass

WARNING: 50px/30px on line 7 of value_calculator.sass

WARNING: number on line 7 of value_calculator.sass

WARNING: string on line 7 of value_calculator.sass

如果你想要把變數值當作**字串**來使用，那麼就將他以 `#{}` 來輸出，那麼他就會是字串，在型別上也會判定為字串。但是要注意的是，Sass 並沒有提供型別轉換的工具，所以在使用變數時，請謹慎選擇你所需要的變數值型別。


> 本文版權所有，嚴禁轉載翻印。