# 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`