SCSS入門 - 在Vue中使用SCSS
閱讀時間約 3 分鐘
SCSS與SASS都是CSS預處理器，可以幫助開發者更方便管理CSS程式碼，而SASS寫法上不須加上「{} ;」，而是用縮排來簡化，SCSS寫法上則類似CSS，可以兼容CSS語法，SASS則無法兼容CSS語法，以下將以SCSS為主來說明。
CSS/SCSS/SASS寫法差別
vue.js使用scss
- 安裝scss編譯器
$ npm install -D sass-loader node-sass
2. 使用方法
(1) 加上lang="scss"，直接寫在style中。
(2) 使用src引入scss
& 連接
屬性巢狀
變數宣告
@mixin / @include
- 類似function的概念
@extend
@mixin 與 @extend 差別
- @extend
編譯後CSS:
繼承的部分編譯後會合在一起。
- @mixin
編譯後CSS:
引用的style會直接放進selector，會有一堆重複的程式，如果@mixin寫很多行，又很多selector都引用，編譯出來的CSS就會很大包。
所以如果是重複的樣式，用extend會比較好，build出來的css較小，如果是想重複使用的定義，且要根據參數設定，就用mixin。
@import
編譯後CSS:
值得一提的是，假設已經有用src引入scss，裡面的import跟style都會被src的scss取代:
編譯後CSS:
可以發現sub.scss跟.hello_world全被main.scss取代了。
註解
(1) 單行註解: //
- 編譯後的css註解會消失。
(2) 多行註解: /**/
- 編譯後的css註解會保留，但如果是編譯+壓縮，註解也會消失。
- 若想要編譯+壓縮後保留註解，需在註解開頭使用/*!，如下:
編譯+壓縮後CSS(有經過format):
編譯+壓縮後CSS(未經過format):
本筆記參考:
1. https://ithelp.ithome.com.tw/articles/10244301
2. https://medium.com/@tina2793778/sass-%E5%85%A5%E9%96%80-b7713492fada
3. https://hoyis-note.coderbridge.io/2021/08/16/Vue3%E5%AE%89%E8%A3%9DSCSS%E7%B7%A8%E8%AD%AF%E5%99%A8/
4. https://ithelp.ithome.com.tw/articles/10247312
5. https://ithelp.ithome.com.tw/articles/10260013
6. https://jyun9504.github.io/2020/04/29/sass-extend-vs-mixin/
7. https://medium.com/@tina2793778/sass-import-9a8b1f43198d
8. https://medium.com/unalai/vue-%E5%B0%88%E6%A1%88%E4%B8%AD%E5%BC%95%E5%85%A5-scss-%E6%AA%94%E6%A1%88%E7%9A%84%E5%9B%9B%E7%A8%AE%E6%96%B9%E6%B3%95-%E8%A9%B2%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E5%91%A2-9babcd3a4ef1
9. https://kakadodo.github.io/2018/10/23/css-sass-2/
1. https://ithelp.ithome.com.tw/articles/10244301
2. https://medium.com/@tina2793778/sass-%E5%85%A5%E9%96%80-b7713492fada
3. https://hoyis-note.coderbridge.io/2021/08/16/Vue3%E5%AE%89%E8%A3%9DSCSS%E7%B7%A8%E8%AD%AF%E5%99%A8/
4. https://ithelp.ithome.com.tw/articles/10247312
5. https://ithelp.ithome.com.tw/articles/10260013
6. https://jyun9504.github.io/2020/04/29/sass-extend-vs-mixin/
7. https://medium.com/@tina2793778/sass-import-9a8b1f43198d
8. https://medium.com/unalai/vue-%E5%B0%88%E6%A1%88%E4%B8%AD%E5%BC%95%E5%85%A5-scss-%E6%AA%94%E6%A1%88%E7%9A%84%E5%9B%9B%E7%A8%AE%E6%96%B9%E6%B3%95-%E8%A9%B2%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E5%91%A2-9babcd3a4ef1
9. https://kakadodo.github.io/2018/10/23/css-sass-2/
為什麼會看到廣告
21會員
161內容數
留言0
查看全部
你可能也想看
Google News 追蹤
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Vue Router 及 具名視圖，擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合，有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩，而 Vue Router 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。
什麼是 CSS 預處理器
CSS 預處理器是一種工具，使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇，它們通常會提供一些純 CSS 中沒有的功能，例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護，並提高開發效率。
為什麼使用 CSS 預處
這篇文章將解析CSS Battle第136題的解法，主要考驗基本CSS置中排版的能力，並提供了作者的解法與技術總結。透過互動學習，讓想要學習或練習基礎切版的朋友可以參與討論。
指令(Directives)是 Vue 中一個重要的概念，它們提供了一種簡單的方式來操作 DOM 元素。本文將介紹 Vue 的兩個常用指令：v-if 和 v-show，並通過實際範例來解釋它們的不同之處和使用場景。
Vue 的單文件組件（Single File Components，SFC）是一種特殊的文件格式，讓我們可以將Vue 組件的模板、邏輯和樣式都寫在單一個文件當中。本文將介紹 Vue SFC，幫助開發者理解和使用 Vue SFC。
是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！
很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！
回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Vue Router 及 具名視圖，擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合，有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩，而 Vue Router 完美的解決了這棘手的問題，且能客製頁面想要呈現的擺飾。
什麼是 CSS 預處理器
CSS 預處理器是一種工具，使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇，它們通常會提供一些純 CSS 中沒有的功能，例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護，並提高開發效率。
為什麼使用 CSS 預處
這篇文章將解析CSS Battle第136題的解法，主要考驗基本CSS置中排版的能力，並提供了作者的解法與技術總結。透過互動學習，讓想要學習或練習基礎切版的朋友可以參與討論。
指令(Directives)是 Vue 中一個重要的概念，它們提供了一種簡單的方式來操作 DOM 元素。本文將介紹 Vue 的兩個常用指令：v-if 和 v-show，並通過實際範例來解釋它們的不同之處和使用場景。
Vue 的單文件組件（Single File Components，SFC）是一種特殊的文件格式，讓我們可以將Vue 組件的模板、邏輯和樣式都寫在單一個文件當中。本文將介紹 Vue SFC，幫助開發者理解和使用 Vue SFC。
是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！
很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！
回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。