Leo 程式筆記

什麼是 SASS ?

不管是 SASS、SCSS、Stylus 等

相信大家一定都有聽過，但到底是什麼東西？為什麼大家都說好用、方便？

其實這部分需要從最一開始CSS設計開始說起。

相信大家一定都有類似這樣的經驗：

好不容易辛辛苦苦完成一個官方網站，業主看完之後回了一句：「我覺得這些按鈕的顏色都太淺了，我希望再深一點;另外背景色太暗了，我想要亮一點。」

好，拿了錢總要做事嘛，花了好多時間把所有按鈕顏色加深、背景加亮。

業主看完之後依然回了一句：「原來加深之後這麼難看喔？那你再幫我改回來好了，最好可以再深一點點就好。」

相信看到這裡的你，拳頭大概已經硬了。

這樣改了又改，改了又改，錢也沒變多。

所以這時候就會開始納喊許願：

有沒有可能把程式的概念引入到 CSS 裡面去呢？例如說變數？這樣我們就能夠用變數來取代寫死的顏色，要改的話也很方便，只要改一個地方就好？

這不就是 CSS preprocessor 嗎？

沒錯，CSS preprocessor 就這樣誕生了。

CSS preprocessor，中文就叫做 CSS 「預處理器」，簡單來說就是你可以先用程式寫一些樣式設定的語法，經過這個預處理器之後，就會變成符合標準的 CSS。

有了CSS preprocessor之後，就可以把變數也應用到 CSS 上面，當然程式語法裡面的 IF、迴圈甚至是函式都應有盡有，讓你從設計師開始踏入這條程式的不歸路。

而 CSS preprocessor 主要提供了以下幾個功能：

變數 ( Variable )、繼承 ( Extend )、函式 ( Function )、混用 ( Mixin )

那我們就一個一個來介紹怎麼使用吧！

變數 ( Variable )

有了前面慘痛的經驗後，我們體會到，每一次需求一來，改了又改，改了又改，改到最後甚至還忘記哪些地方漏改了，所以我們可以透過 變數，來幫我們做集中的管理

只需要改一次，就可以做到全站統一的效果。

$font_style:Microsoft JhengHei;
$body_color: #E1E1E1

body {
 font-family: $font_style;
 color: $body_color; 
}

就像上方的範例程式碼一樣，我們可以透過變數的方式，來控管字體樣式、背景顏色等等。

今天就算要更換樣式，我也只需要更改上方變數的值，就可以達到全站統一，這就是——變數。

繼承 ( Extend )

有了變數之後，我們可以很快速的將每一個我們所需要的樣式，都套用同一個變數來去設定樣式。

可是這樣還有一個問題：「每一次我樣式都還要重複打」

在Alex大的影片當中有提到：通常我們想要將 <a> 變成按鈕的時候，我們都會固定打上以下的程式碼：

a {
  display:block; /*將 a 變成區塊*/ 
  text-decoration:none; /*清除超連結底下的那條底線*/
}

那變成是我們每一次在製作按鈕的時候，都需要先打上這兩行程式碼，之後再根據不同種類的按鈕給予不同的寬度、行高等。

那有沒有什麼方式是可以讓我把固定要寫的樣式集中在一起，未來有需要我只要呼叫就可以？ 

那就是——繼承。

%aButton {
  display:block;
  text-decoration:none;
}

a {
 @extend %aButton;
 /*透過上面的extend 我就可以直接使用已經寫好的樣式，接下來下方就可以自定義我其他按鈕樣式*/
 width:100%;
 height:20px;
 line-height:20px;

}

所以看到了這裡，我們已經善用了變數以及繼承，讓我們的SCSS可以做好一個集中式的控管，產生出來的CSS也是乾淨利落，一舉兩得。

不過接下來還有一個問題還沒解決。

我們很常會去定義每一種不同的類別的字，他的字型大小。

舉例來說：

上圖是我這一次參加六角學院舉辦的精神時光屋，所提供的一份設計稿。

其中裡面定義了Title、Title2、Title3、Subtitle、paragraph、Logo 的字型大小。

如果每一次都要去定義不同類別的字，會有不同的大小，好像也有點累。

要知道，人類是懶惰的，科技始終來自人的惰性。

所以這時候我們的函式就可以派上用場拉！

函式 ( Function )

我們可以透過函式，來去定義每一個類別的字，他要產生的大小為何。

/*這裡我們用六角學院提供的設計稿來做範例，我們發現他正好是12的倍數*/

$baseSize: 12px;

/*寫一個函數去定義每一種類別的字，它的大小 */
@function font($level: 1) {
  
  @return $baseSize *$level;
}

/*套用函數 font()*/

.Title {
 font-size:font(6);
 font-family: Roboto-Black;
}

.Title2 {
 font-size:font(4);
 font-family: Roboto-Black;
}

.Title3 {
 font-size:font(2);
 font-family: Roboto-Black;
}

.Subtitle {
 font-size:font(2);
 font-family: Roboto-Black;
}

.Paragraph {
 font-size:font(1.3);
 font-family: Roboto-Black;
}

這樣今天我如果我希望整個 baseSize調整成10的倍數，那麼也只要改最上面的$baseSize，就可以達到全站統一的效果。

是不是很簡單很開心？

好的~終於到最後一個重點了。

剛剛前面我們有講到：對於相同的、重複的樣式，我們可以透過 繼承(Extend) 來幫我們完成。

透過SASS，我們可以將共同的樣式寫在一起，之後使用@extend 就可以直接載入樣式：

%aButton {
  display:block;
  text-decoration:none;
}

.successBtn {
 @extend %aButton;
 /*透過上面的extend 我就可以直接使用已經寫好的樣式，接下來下方就可以自定義我其他按鈕樣式*/
 width:100%;
 height:20px;
 line-height:20px;

}

.errorBtn {
 @extend %aButton;
 /*透過上面的extend 我就可以直接使用已經寫好的樣式，接下來下方就可以自定義我其他按鈕樣式*/
 width:80%;
 height:20px;
 line-height:20px;

}

/*產生出來的 CSS */

.successBtn,.errorBtn {
  display:block;
  text-decoration:none;
}
.successBtn {
  width:100%;
  height:20px;
  line-height:20px;
}
.errorBtn {
 width:80%;
 height:20px;
 line-height:20px;
}

但是遇到有字級的這種該怎麼辦？

不同種類的文字，有自己對應的字級大小，也不是像 剛剛 function一樣是走一個倍數成長的概念。

那我要如何針對不同的字級，正確給予不同的大小呢？

那就是使用—— 混用 ( Mixin )。

 混用 ( Mixin )

正如剛剛前面所說，針對每一種不同的文字種類，我希望大小要能不一樣（如：Title:36px, Subtitle:28px,content:16px）

但是使用 extend 我們會發現到：「extend會將共同擁有的樣式集中管理」。也就是一個樣式，只會產生出一份 Code

那 Mixin呢？

他會這樣子：

@mixin aButton() {
  display:block;
  text-decoration:none;
}

.successBtn {
 @include aButton();
 /*透過上面的include 我就可以直接使用上方寫好的mixin樣式，產出屬於他自己的Code*/
 width:100%;
 height:20px;
 line-height:20px;

}

.errorBtn {
 @include aButton();
 /*透過上面的include 我就可以直接使用上方寫好的mixin樣式，產出屬於他自己的Code*/
 width:80%;
 height:20px;
 line-height:20px;

}

/*產生出來的 CSS */

.successBtn {
  display:block;
  text-decoration:none;
  width:100%;
  height:20px;
  line-height:20px;
}
.errorBtn {
 display:block;
 text-decoration:none;
 width:80%;
 height:20px;
 line-height:20px;
}

沒錯，它不像extend一樣，會將共同的樣式集中在一起，而是產生出兩份一模一樣的程式碼。

而這一點，正好就可以應用在我們的字級上。

雖然說相對的產生出來的樣式會很大一包，因為每include一次，就會產生一組樣式。

但相對的，就能夠擁有客製化的效果。

我們來看看 Alex大 提供的字級樣式：

$baseSize:14px;
$sizeLevel:2px;

@function font($level: 0) {
  @if $level < 0 {
    $level:0 
  }
  @return $baseSize + $sizeLevel * round($level);
}

@function rhythm($size) {
  @return ceil($size * $paddingLevel / $baseLineSize) * $baseLineSize;
}

@mixin font($level: 1, $line-height: auto) {
  $size: font($level);
  $line: rhythm($size);

  font-size: $size;
  @if $line-height == auto or $line-height < $line {
    line-height: $line;
  } @else {
    line-height: $line-height;
  }
}


.aaa {
  @include font(2);
}

.bbb {
  @include font(4);
}

.ccc {
  @include font(2);
}

/* 產生出來的 CSS */

.aaa {
  font-size:20px;
}

.bbb {
   font-size:28px;
}

.ccc {
  font-size:16px;
}

透過 Mixin 我們就可以將不同類別的字級，給予不同的字體大小，就是這麼簡單。

注意： Mixin 是 跟 extend 做比較，一個是產生多個樣式；一個是將樣式全部集中管理。 請不要將 Minxin與 Function搞混做比較。

看完上面介紹的這幾種SCSS功能，有沒有更加了解呢？希望今天的筆記能帶給你/妳不一樣的 CSS 體驗。

當然，筆者只將 SCSS 的重點功能做一個簡單的介紹，方便當字典快速查閱。

其他精彩內容依然要到 Alex 大的頻道觀賞唷！

以上文章敘述如有錯誤及觀念不正確，請不吝嗇指教:)

有任何家教、案子 或技術相關問題 請都歡迎聯繫我

http://www.zhenghui.idv.tw/