(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 吧!