快速複習SASS
這篇文章從Medium直接搬運過來，未花時間整理與重新驗證，
該文章是Dec. 16, 2019撰寫，由於是技術相關文件，請留意內容是否已經不再適用。
本文為閱讀30天掌握Sass語法筆記(Day 1~Day 7)，詳細解說歡迎閱讀原文！
SASS是什麼？
- Syntactically Awesome Stylesheets
- CSS 預處理器(Preprocessor)語言
- 職缺要求裡面很常看到的詞
SASS怎麼寫？
CSS:
.menu {
position: relative;
}
.menu li {
float: left;
}
.menu a {
display: block;
}
.menu span {
color: #fff
}
.menu i {
background: url(dot-icon.png);
}
問題點：
- 每次都必須重新打一次.menu後才有辦法繼續寫一個樣式的設定，例如.menu a、.menu li
- 日後.menu要改其它名稱就必須逐行去修改。
- 如果不小心恍神少了個「;」、「｛」、「｝」時，壞掉通常都需要花時間除錯。
SASS:
.menu
position: relative
li
float: left
a
display: block
span
color: white
i
background: url(dot-icon.png)
導入前的自我檢查：
- 是否有許多後代選擇器難以管理？
變數
CSS:
.header a {
color: #000;
}
.menu a {
color: blue;
}
.footer a {
color: #000;
}
.nav a {
color: blue;
}
問題點：
- 連結有設計固定顏色，但修改時需要逐行瀏覽修正
SASS:
$link-color-1: #000
$link-color-2: blue
.header a
color: $link-color-1
.menu a
color: $link-color-2
.footer a
color: $link-color-1
.nav a
color: $link-color-2
導入前的自我檢查：
- 是否有固定的設計可以用變數取代？
@import
使用@impor載入其他sass檔，可將程式碼切成各模組區塊，程式碼較少，同時也較能準確聚焦欲修改的區塊 SASS: (before)
// all.sass
.main
width: 500px
.container
height: 100px
問題點：
- 如果檔案非常大，要找到要修改的區塊將變得非常困難
SASS: (after)
// _index.sass
.main
width: 500px
// _page.sass
.container
height: 100px
// all.sass
@import index
@import page
在index.sass和page.sass檔名前加上_，則該檔案不會被編譯出來，最後只有all.sass被編譯出來，成功將數個sass整合編譯成為一個css檔案。
導入前的自我檢查：
- 是否有單一檔案過大？可否切割出獨立檔案以便修改？
@mixin
可以傳入參數，參數可設定預設值，會在呼叫的地方實際產生編譯出來的結果
SASS:
@mixin bg($bgcolor:#000,$width:200px)
background: $bgcolor
width: $width
.header
+bg
.footer
+bg(#ff0000,300px)
編譯出來的CSS:
.header {
background: black;
width: 200px;
}
.footer {
background: red;
width: 300px;
}
導入前的自我檢查：
- 是否有可以抽出來統一管理的相同樣式？
@extend
可以繼承樣式。
CSS:
/* 第200行位置 */
.header h1, .content h1, .footer h1 {
font-size: 20px;
line-height: 1.8;
letter-spacing: 1px;
}
/* 第400行位置 */
.header h1 {
color: black;
}
/* 第1000行位置 */
.content h1 {
color: green;
}
/* 第4000行位置 */
.footer {
color: pink;
}
問題點：合併樣式程式碼的位置在第200行，而我目前所在位置是在4640行，當我又需要合併樣式時，就又必須用滾輪會調卷軸到第200行來合併class樣式，所以當程式碼越變變多時，要集中相同樣式的工作流程相對也會變得更加繁瑣。
SASS:
%all-h1
font-size: 20px
line-height: 1.8
letter-spacing: 1px
.header h1
@extend %all-h1
color: #000
.content h1
@extend %all-h1
color: green
.footer
@extend %all-h1
color: pink
導入前的自我檢查：
- 是否有合併樣式以致於難以管理的地方？
@mixin與@extend的使用時機該如何抉擇？
基本上來說，
@mixin是將程式碼帶入到對應的class去，同時可帶入參數。
@extend則是藉由class合併，並吃到共通樣式，但沒辦法帶入參數。
所以如果你的樣式都固定不變的，不會需要用參數帶進去改變樣式的 話，
那用@extend程式碼會比較少些。
但如果你的程式碼需要帶入多個變數進行運算時，
那用@mixin則較適合。
從使用CSS轉換到SASS(以node-sass進行手動編譯)
原文是以Compass進行編譯，因為自己平常是用node.js開發，就試著用node-sass吧！
- 建構使用CSS的簡單網頁
- 安裝node-sass
npm i -g node-sass
- 將CSS改寫為SASS
- 將SASS檔案編譯成CSS檔案
node-sass index.sass > style.css
主要就是兩個使用的指令，這是超級簡化版本。
以上若有任何錯誤歡迎指正！