(2)Sass/SCSS可以如何提升CSS開發效率?
還記得上一篇提出的4個惱人的CSS開發問題嗎?
前情提要:
今天就要來依照這4點對症下藥💊，說說使用 Sass/SCS S開發 CSS 的好處~
以下會說明 Sass/SCSS 4種基本好處 (以 SCSS 寫法作介紹):
- 巢狀寫法不重工
- 外層 class 名稱更改好方便
- 變數功能
- @import功能
巢狀寫法不重工
1.寫 .header 的樣式寫完，總是接著寫 .header ul、.header li、 .header li a ，有沒有什麼方法可以減少重工的問題 ?
原本 CSS 寫法:
使用 SCSS 寫法 :
依照此寫法，不須重複一直寫外層標籤，即可編譯出和上面內容相同的 CSS檔案。
⚠️但須注意的是，在寫 Sass/SCSS 時，巢狀結構都盡量以 不要超過四層 為主。
外層class名稱更改好方便
2.當 class 名稱撞名，或臨時想改掉時，便要一個一個找出來改名字，
真困擾~
依照上面 SCSS 程式碼範例，如果我們想要把 .header 改成 .nav，只需要把第一行 .header 改成 .nav，存檔後，編譯出的 CSS 檔案中.header 就會全部改成 .nav 囉 !
變數功能
3.各種顏色設定讓人好苦惱，是否有更好的方式能將他們有效整合運用 ?
試想以下情境 :
下班前，老闆悠悠的說出一句: 「所有這個藍色的地方，都幫我改成紅色!」你 : 「好(哪)的(泥)!」
在跨年當天已跟朋友約好下班party的你，面對多頁式網頁的程式碼們，你，今天想幾點下班呢 ?
此時若是使用 CSS 預處理器，便能輕鬆準時打卡下班 !!
使用 Sass/SCSS 的變數功能 管理CSS，只需要修改一個變數的色碼即可。
先來看個 CSS 範例 :
以上程式碼可看出，此網頁的a連結大致分為兩種顏色，黑色跟藍色，
我們可以使用 SCSS 變數寫法將他們整合管理 :
從以上範例，可以看到第一、二行我們分別先將兩個頻繁使用的顏色色碼抓出來，定義為變數，變數的用法為 :
$ + 自己命名的變數名稱 : 設定變數內容
ex: $link-color-1: #000
如此一來，我們若要將所有藍色的連結顏色都改為紅色，只要將第二行的blue 改成 red 即可。
更可針對常用的 css 樣式進行管理 :
- 預設文字顏色 : $text-color: pink
- 全域文字大小 : $font-size: 13px
- 全域行高 : $line-height: 1.8
- 網站container容器寬度 : $container-width: 960px
- 全域字型 : $font-style : “Helvetica Nueue”, Arial, Sans Serif;
@import功能
4.雖然已經能將重複的 CSS樣式整理出來，變成一些共用的小工具，
但全寫在同一個 CSS 檔案依舊落落長🤦♀️，再加上檔案開頭的 CSS reset，
找個 code又要找好久~
CSS 程式碼落落長不好管理，可以使用 Sass 的@import功能哦 !
我們可以將 CSS 程式碼切分成好幾份，再 import (匯入、輸入)至一個主要的 all.scss檔案，最終編譯出一個all.css 檔案。
一開始練習Sass/SCSS，老師建議我們可將 scss 檔案大致先分為 5 個區塊 :
- variable -變數
- reset -css reset
- layout -共同框架
- index -主頁
- page -分頁
🙋♀️有這麼多的 scss 檔案在同一個資料夾，要如何只讓主要的 all.scss檔編譯成最終的 all. css 檔呢 ?
為了不讓存在資料夾裡用來被 import 的檔案也被編譯成 CSS 檔，我們存檔時須在這些檔案的檔名前面加上下底線 ，例如_reset.scss、_index.scss、_grid.scss，而最終只有檔名前沒加上底線的 all.scss 會被編譯成CSS檔案 !
all.scss檔案的功能便是用來彙整所有scss檔案，內容會像以下這樣 :
分類清楚，一目了然，想改哪裡就開哪個檔案，讓CSS開發方便許多呢~
🙋♀️最後有個問題，現在有 CSS檔案，又有 SCSS檔，在我們的 HTML中究竟要載入 CSS還是 Scss檔案呢 ?
Sass/scss 只是 css 預處理器，幫助我們更有條理、有效率開發 CSS，最終目的也一樣是編譯出一個 CSS檔案，因此我們在 HTML要載入的依然是 CSS檔案唷~
<link rel=”stylesheet” href=”css/all.css”>以上只是先大概說明了使用 Sass/SCSS 的好處，下一篇就來教大家如何建立環境，並開始使用 Sass/SCSS 吧!
