---
# System prepended metadata

title: SCSS 筆記
tags: [Sass, css, SCSS]

---

# SCSS 筆記
CSS 的超集合 Sass 的語法之一。適用於 2020 年 1 月
![封面](https://i.imgur.com/xMLxUQ7.png)
Sass 解決了大型專案中 CSS 可維護性差、重複繁瑣的缺點，透過組件化有效管理 CSS 樣式。後有 SCSS 較為平易的衍生語法較新的語法，此篇以 SCSS 上手作為紀錄。
## 安裝
1. npm 安裝 Sass
`npm install -g sass`
2. Visual Studio Code 安裝 Live Sass Compiler 擴充套件
![Live Sass Compiler](https://i.imgur.com/MWfAfhi.jpg)
3. 在專案裡新建 style.scss （文件名可自訂），terminal 裡輸入以下指令
`sass style.scss style.css`
使新建的 scss 檔、與藉由此指令新建且轉譯而成的 CSS檔，互相綁定。 html 檔的 ``<head>`` 要 ``<link>`` 的還是 CSS 檔案，SCSS 檔是給人看的。
4. 打開 Sass compiler 的 Watch
![Watch的位置](https://i.imgur.com/XiLc79l.jpg)
點一下 Watch Sass，terminal 跳出 watching 訊息就對了在這之後，不要修改 css 的程式碼，scss 的程式碼會同時在 css 裡自動生成。
5. import 一個 reset.scss
從 [hcatlin 的 github](https://gist.github.com/hcatlin/1027867) 中下載或複製一份 reset.scss 並存進專案
在 style.scss 開頭寫上`import 'reset';`即可
測試 reset.scss 是否作用中，例如一個`<h1>`標籤的預設樣式應被清除，與`<p>`無異

## 寫法
以最新的 SCSS 寫法為準
### 巢狀結構
SCSS 需要以些許類似寫 html 的方式來撰寫樣式，例如
{%gist lizaosan/191a8cad75f283ee92887c4e3d4a43b8%}
在連動更新的 css 檔中就可以看出原本的 css 語法必須怎麼寫
{%gist lizaosan/29f87afc0ceb1c07525f3f8801ce6722%}
### 變數
SCSS 可以宣告變數並給予值，做樣式的統一管理，也能做四則運算跟取餘數等等內建 function。
{%gist lizaosan/157e2688503386f74ff4c9a47df16fd3%}
在傳統 css 中，一旦業主臨時希望更改樣式表，以更改企業識別顏色為例，在大型專案中就必須一個一個尋找所有相關相同顏色的 class 手動修改。難以維護甚至可能造成疏漏。
{%gist lizaosan/e3667a28794c05756bda21d99cdd788b%}
### 繼承
樣式表的元件化管理，以`@extend`呼叫名前有`%`的樣式集合。在最外層寫好樣式表，任何地方就能`@extend`該群組並繼承所有樣式。
{%gist lizaosan/7e3e2ec29284dbb6b5f126bbff2c5f4d%}
{%gist lizaosan/5557392b17ad0ca4d0d0e1898c5a0d62%}
### Mixins
功能與`@extend`類似，但還額外追加函數功能，但編譯後的 CSS 較`@extend`肥大。使用方式是以`@mixin`宣告後用`@include`呼叫。
{%gist lizaosan/62d6efb4ab957a414a57f371e48cfa81%}
{%gist lizaosan/55b698e9d1711be9a0786ce025c252bf%}
配合 reset 的效果
![Sample](https://i.imgur.com/rE7VEwW.jpg)
### pseudo 元素（偽元素）
像是`:hover`、`::before`、`::after`改以`&`代表父元素。
{%gist lizaosan/5087f9521268f2ad477ba9392a5b3a61%}
{%gist lizaosan/889449574eb4ccea6b116bccc627b258%}

## 參考
* [Sass / SCSS 簡明入門教學 - Startup Engineering](https://blog.kdchang.cc/2016/10/11/sass-scss-tutorial-introduction/)
* [SCSS基本使用教學：變數、巢狀、函式、繼承寫法 - 梅問題教學網](https://www.minwt.com/webdesign-dev/13943.html)

###### tags: `css` `Sass` `SCSS`