作者murmur
很~久沒更新了，我知道!這段時間都在忙Vue的一些專案協作，不得不說Vue這個框架實在很有趣，但我目前的熟練度還不足以寫成教學文章，應該會在node文章告一段落後開始寫Vue的學習紀錄!敬請期待!
前言
Sass一直被譽為前端開發者必學的一個工具，今天就來介紹一下到底什麼是Sass、為什麼我要用它以及一些簡單的實作! Let’s go~!
什麼是Sass/Scss?
到底什麼是Sass? 它跟Scss有什麼關係嗎?
Sass全名為( Syntactically Awesome Style Sheets)，是一種CSS的擴充功能，能藉由使用變數、行間import、巢狀結構等功能幫助你快速且有條理的寫CSS， 而Scss是Sass3之後推出的新版本，不但繼承了Sass強大的功能，語法還與CSS3完全的兼容，也就是說你可以用你更為熟悉的方式學習這個強大的工具!
為什麼我需要會Sass/Scss?
我現在Css寫得好好的~突然又要我學新東西!幹嘛啊!!!
也許你心裏會這樣murmur，我們照老樣子舉個例子來看一下吧!
你花了4天的時間好不容易完成客戶要求的切版，當你信心滿滿的提交你的作品時，客戶突然跟你說一句:「欸豆，我們突然覺得我們之前要紅色的部分不是這麼恰當，可以改成水藍色讓我看看效果嗎?」 於是你咬著牙，在心裡跟他的18代祖宗問好之後，把專案中所有之前用紅色的地方全~部改為水藍色，一行一行的複製貼上，反覆檢查後再次向客戶提交，客戶突然跟你說......
接著的故事內容我想就不用多說了，很多時候為了確保設計的一致，在你的頁面中會有許許多多的元件都套用相同的樣式，日後若想做個小變更便會出現以上的糾結，而這些都可以透過Sass/Scss的強大功能來解決! 下面我們就介紹如何使用Sass/Scss以及一些基本的用法!
前置動作
如果你跟我一樣是用VS code寫專案的話，那首先請你到extention部分搜尋live sass compiler並安裝，live sass compiler 是一種將Sass/Scss轉為瀏覽器理解的CSS語言的小工具!
而如果你是利用codepen或是jsfiddle想體驗一下的話，只要在設定的部分選用Sass預處理就可以囉!
準備基本的index.html & style.scss檔案
在你的專案目錄下，請你新增簡單的index.html檔案，裡面你可以隨意放上一些內容。
index.html
<body> <header> <h1>hello my dear</h1> <button>click me</button> </header> <div class="contact"> <h1>I'm Danny</h1> <p>I do nothing</p> </div> </body>
並建立一個style資料夾，裡面包含一個空白的style.scss檔案，請你先在樣式中隨意改動header的樣式。
style.scss
header {
background: green;
}
接著點選右下的compiler 套件，它會幫我們把Scss檔案轉為css檔案
完成後你的專案結構應該變成這樣，在style資料夾下增加了兩個css檔案。
打開compiler幫你產生的css檔案，你會發現看起來跟你剛剛寫的東西沒什麼不同!原因就像我開場說的，scss的語法上與CSS3兼容，所以你看起來會覺得非常的熟悉~!
style.css
header {
background: green;
}
/*# sourceMappingURL=style.css.map */
基本用法介紹
以下我會介紹幾個sass/scss最常用到的幾個功能，基本上以程式碼為主!
基本上會是一步步往下深入，過程中可以經常回去比較scss檔案與產生的css檔案內容上的差異，你就可以比較了解scss是如何被編譯成我們熟悉的css!
變數使用
當我們今天想在scss檔案中使用變數，寫法相當的容易，請你觀察以下的程式碼應該就可以了解使用的方法。
style.scss
$backgroundColor :green ;
header {
background: $backgroundColor;
}
當你在使用變數時，只要在宣告以及使用時都加上$便可輕鬆的在scss檔案中使用變數。
階層/巢狀結構
回頭看一下我們的html結構，在header內有個h1、而在下方的div中也有個h1，如果你想修改header內的h1，作法應該會像是這樣。
header h1 {
color:#fff;
}
但在scss檔案中，你只要統一寫在header內就可以了，compile出來的結果會與上方的寫法一模一樣，如下。
header {
background: $backgroundColor;
h1 {
color: #fff;
}
}
這樣的階層寫法讓人更清楚每個元素間的關係，在後續維護上也較為方便!
偽元素/偽類的使用(pseudo)
在scss中使用偽元素/偽類也非常簡單，假設我今天想對header中的按鈕做簡單的hover效果，並在按鈕的後方加入幾行字，程式碼就可以這樣寫。
style.scss
$backgroundColor :green ;
header {
background: $backgroundColor;
h1 {
color: #fff;
}
button {
&:hover {
background: #df21fa;
}
&::after {
content: 'clickkkkkkkkk'
}
}
}
當你想加上偽類/偽元素時，只要在想套用的元素上加上&便可輕鬆的在scss檔案中使用偽類/偽元素。
集中管理變數/元件
聰明的你應該想到了，當專案結構變大時，宣告的變數、不同的元件如果都放在同一個檔案中那怎麼稱得上維護容易? 要將變數/元件獨立出來的做法也相當容易，基本的觀念就是把相關的元件集中成一個scss檔案，日後在修改時就可以快速找到要修改的地方。
我們先來處理變數，首先我們在style資料夾下建立一個_variables.scss檔案(_底線只是習慣，並不影響執行)，然後把我們放在style.scss的變數放進來。
_variables.scss
$backgroundColor :green ;
當你只做到這步的時候，你會發現下方的終端機跳出了錯誤。
原因相當的單純，在不同檔案間的變數或樣式需要透過引入(import)來使用，所以請你回到style.scss檔案，在最上方進行變數檔案的引入
style.scss
@import "./variables"; 加入這行 注意一下你這邊並不需要打_variables
header {
background: $backgroundColor;
h1 {
color: #fff;
}
button {
&:hover {
background: #df21fa;
}
&::after {
content: 'clickkkkkkkkk'
}
}
}
同樣的作法你也可以用在元件的管理上，獨立出一個_header.scss檔案來管理header吧!最後別忘了回到style.scss引入，這時候你會發現原本的檔案變得超~乾淨的!
style.scss
@import "./variables"; 這邊務必注意引入的順序，由於我們在header中有使用變數 所以變數的檔案需要先引入 @import "./header" ;
Mixin
Mixin的概念也許你會比較陌生，不過你可以把它想成一組你常用的樣式，比方說今天你在處理h1的時候你有固定一套樣式，但你只想在部分的區塊套用這樣的樣式，那mixin就派上用場囉!
一樣我們先觀察一下程式碼，用法跟宣告變數時相當類似。
_header.scss
@mixin h1Text {
font-weight: 400;
text-align: center;
font-size: 28px;
}
header {
background: $backgroundColor;
h1 {
@include h1Text();
color: #fff;
}
button {
&:hover {
background: #df21fa;
}
&::after {
content: 'clickkkkkkkkk'
}
}
}
在上方的程式碼中，我們宣告了一個名為h1Text的樣式組合，之後在h1元素中利用include語法來引入，注意一下mixin是個可以傳入參數的函式在使用時務必加上括號!加入參數的用法之後再提，文章的長度已經超出我預期了XD
extend
最後一個要提到的功能便是 extend，從字面上的意思你就能了解它是用在某個樣式的延伸，也就是重複使用樣式的概念，聽到這邊我想敏銳的你已經發現一些問題了，我們等等一起做說明，先看一下用法。
今天我想在下方的div套用我在header的所有樣式，我便可以利用extend達成這樣的效果。
style.scss
@import "./variables";
@import "./header";
.contact {
@extend header;
}
基本用法相信你也看出來了， " @extend “你想繼承的元素" " 使用上相當的方便。
但你可能會好奇，欸?這個mixin不是也做得到相同的事情嗎? 沒錯!兩者經常被拿出來做比較，比較顯著的差異在於mixin可以傳述參數做出不同的樣式，舉個例子來說:「今天你想在不同的區塊呈現樣式相同，但內容不同的錯誤訊息」，這種情境下mixin很明顯會比extend來得好用一些!
結語
這篇文章我們介紹了Sass/Scss與它的一些基本用法，即便只是介紹了幾個常用的手法，依然可以看出為什麼sass被譽為必學的技能之一!未來應該會多開一篇文章講一些進階用法，同時介紹一下如何在前端框架中使用Sass/Scss!
Danny的學習紀錄 