昨天晚上看完了 Alex大的 「CSS到SASS入門引導」直播
看完之後其實學到不少東西，趁著自己記憶猶新趕快將Alex在 Youtube留存的影片再拿來複習一下
順便紀錄在部落格當中，下次就可以更快速學習。
什麼是 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 大的頻道觀賞唷！
以上文章敘述如有錯誤及觀念不正確，請不吝嗇指教:)
有任何家教、案子 或技術相關問題 請都歡迎聯繫我
