views: 4468 times
俗話說得好，事不過三，所以大抵上寫到 Part 3 就沒有什麼好說得了（揍飛）。其實 @mixin 的概念並不困難，他是很單純的可以當作是一個函式來用，也可以用 @include 來引入。而，使用 @include 引入的方式跟 @extend 與 Nested @import 其實很類似。

依照慣例，範例先上。


產出結果比較：



請注意輸出結果，基本上 Nested @import 跟 @mixin 的 @include 輸出的狀況非常類似，只是，輸出的先後順序是不一樣的，這會影響到 CSS 的繼承權重問題，所以在輸出使用上請特別小心。

接著，就是函式的應用，一樣，範例先上。



這就是結果：



上述的 @mixin 函式，是使用＋號來呼叫，然後傳入值是 $width，預設值是 960。如果你沒有傳入值，那麼他就會使用預設的數值帶入。這跟我們一般在寫函式呼叫的方式很像。然後，其實 Sass 有內建的函式可以用，不過這當然得是要去翻官方文件才有的東西。


http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html


文件也非常清楚。清楚到我覺得我應該沒有什麼好寫的了（揍飛）。

至於變數，就是 $ 開頭的東西。他有三種使用的方式：

/* 單純的數字
$width: 960
/* 加上單位的變數
$width: 960px
/* 字串
$width: "960px"

這三種的差異，應該很好辨認吧。特別是加上單位的變數，這是一種很特別的寫法，因為他帶了單位，所以這個變數就不能隨意的用在任何地方，就像是你宣告一個顏色參數（叫做 #FFFFFF），你也不能拿去用在其他的地方（因為他是顏色碼）。

$width: 1000
$width1: 1000px
$width2: "1000px"

.your_class
  width: $width
  width: #{$width}
  width: $width1
  width: #{$width1}
  width: $width2
  width: #{$width2}

我用這個當作例子，所產生的 CSS 如下：

.your_class {
  width: 1000;
  width: 1000;
  width: 1000px;
  width: 1000px;
  width: "1000px";
  width: 1000px; }

注意到了嗎？我使用了 #{ } 的方式來輸出變數。這個 #{ } 所代表的意義，就是去除字串的雙引號，取出字串中的值來使用，他對於字串以外的變數並沒有影響。為什麼要有這種輸出方式呢？我們再看一個例子：

$type: "white"
.my_class_#{$type}
    color: #{$type}

輸出的結果是：

.my_class_white {
    color: white; }

這樣知道 #{ } 的使用時機了嗎？也許你會感到疑惑，既然我的變數本來就不需要雙引號，那我一開始宣告的時候，不要加入就好了啊！當然啦，事情不是憨人想的那麼簡單，我們再看一個例子：

$font_size: 12pt
$line_height: 1.8

.my_class
  font: $font_size/$line_height
  font: #{$font_size}/#{$line_height}

產出的結果是：

.my_class {
    font: 6.667pt;
    font: 12pt/1.8; }

這樣看出結果了嗎？使用 #{ } 可以避免 sass-script 去對你的變數去作運算，也就是，當作單純的值來輸出。這樣可以理解 #{ } 到底有什麼作用了吧。

至於數學運算的部份，請注意的地方是，不同單位的數值不可以混合運算，例如：

$font_size: 16pt
$line_height: 2em

.my_class
  font-size: $font_size/$line_height

如果你這麼做，那麼轉換的時候就會出現錯誤訊息：

$ sass test.sass
Syntax error: 16pt/em isn't a valid CSS value.
        on line 5 of test.sass
  Use --trace for backtrace.

因為單位不同，所以不能做混合運算。所以，當你在使用運算元（+, -, *, /, %）的時候，請注意你的單位問題。當然，無單位數值就沒有這種困擾，但是當無單位數值要給 CSS 使用時，請記得在最後面加上單位。

$font_size: 16
$font_size2: 16pt
$line_height: 2

.my_class
  font-size: #{$font_size/$line_height}px
  font-size: $font_size2/$line_height

輸出的結果就是：

.my_class {
    font-size: 8px;
    font-size: 8pt; }

請注意，一個是有單位運算，一個是無單位運算，這裡又出現了 #{ } 的使用。用意是，將單位把運算後的數值給區隔開來，#{ } 表示把運算後的數值當作一個值，然後再與 px 相互連接。當然，如果你不加上 #{ } 是會錯誤的喔（因為 px 會跟變數接在一起，最後變成 $line_heightpx，然後就會出現錯誤啦）

最後的最後，還是請大家多多翻閱 SASS 的官方文件，裡面有非常詳細的說明。

最後，就醬   

創用 CC 授權

本創作適用 姓名標示-非商業性-禁止改作3.0 創用 CC 授權，台灣並依循所適用的授權條款。