SCSS入門 - 在Vue中使用SCSS

2022/06/30閱讀時間約 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/

為什麼會看到廣告

21會員

161內容數

留言0

查看全部

發表第一個留言支持創作者！

Vic Lin的沙龍的其他內容

Vue3 Composition API

續上篇，那是Vue 2 Options API的舊寫法，這邊改成用Vue 3 Composition API的寫法: Vue2: Vue3 setup() / ref / reactive Composition API可以直接在setup()裡面定義data跟method，簡潔許多。 props

#Vuejs #Vue3 #CompositionAPI

物件導向設計原則 - SOLID

本筆記除了以文字說明SOLID設計原則以外，並以Java code實際舉例。 Single Responsibility Principle (SRP) 單一職責原則每個人負責屬於自己的職責，不該承擔太多職責，大家各自做自己應該做的事情，且不會互相干擾。續上程式碼，修改如下: Output:

#SOLID #OOP

Vue.js 快速入門

data() method 續上篇，這邊修改一下HomeView.vue的code。 Before: After: 在頁面最下方顯示 name: Vic，data method直接回傳name變數，在<template>中可以直接用{{ name }}將變數顯示出來。結果如下: v-model

#Vuejs

Vue.js 環境建置 - Vue CLI

Vue CLI與React的create-react-app是類似的工具，目的都是為了讓開發者快速建置環境，節省複雜的安裝相關環境的時間，簡單的一個建立專案指令與設定，即建立一個內建了Hot-Reload, webpack, ESLint等功能的專案。安裝Vue CLI: 選擇檢查程式碼的時機

#Vuejs

Laravel MongoDB CRUD

假設資料如下: local DB裡面的test Collection SELECT SELECT可以這樣寫: 由於config/database.php中設定的default DB_CONNECTION是mysql，所以這邊特別指定使用mongodb connection。回傳結果如下: 軟刪除

#Laravel #MongoDB

Laravel 使用 MongoDB - 環境建置

欲在Laravel中使用MongoDB，首先要確認有安裝MongoDB PHP driver，接著再安裝Laravel MongoDB套件，才能開始使用CRUD。 1. 安裝MongoDB PHP driver (1) 到這邊下載MongoDB PHP driver (3) 檢查是否正常後記:

#Laravel #MongoDB

第二部分：美國總統大選看未來四年的佈局板塊與投資邏輯（下篇：會員獨享）

接下來第二部分我們持續討論美國總統大選如何佈局, 以及選前一週到年底的操作策略建議分析兩位候選人政策利多/ 利空的板塊和股票

#美國大選 #美國總統選舉 #美股投資

矽谷jojo的沙龍

2024/10/27

[獵人]冨樫如何合理化妮翁的死亡？

🤔為什麼團長的能力是死亡筆記本? 🤔為什麼像是死亡筆記本呢？ 🤨作者巧思-讓妮翁死亡合理的幾個伏筆

#HUNTER×HUNTER #全職獵人

心理師養成記｜Mindy Chu

2024/05/31

入門諮商第一步:如何找到適合的心理師?

心理師沒辦法告訴你人生標準的答案，但能協助你找到屬於你自己的答案下定決心要諮商的那一刻，需要鼓起勇氣，算一算一個療程需要花費大筆金錢，投入不少時間，甚至諮商時需要談自己內心深處的事，對很多人來說是一個相當不容易的嘗試，因此在諮商前許多人會陷入掙扎，該如何找到適合的心理師呢?

#心理諮商 #心理師 #諮商

Joker Cat

2024/05/20

SCSS / Sass 是甚麼？

不專業分享個人學習 SCSS 的筆記，知識來源為YTB講解，各路大神文章。

#SCSS #前端 #學習

YJ 的沙龍

2023/12/03

［前端］切版起手式 : 用 SCSS 自訂義全域樣式

我在準備進入切版的第一步通常會是設定好全域樣式，以及整理出有哪些共用樣式，也就是把設計稿上規範好的設計系統，例如顏色、間距、字體等等先寫好 CSS，而我自從會 SCSS 後就習慣用這個方式去寫 CSS，透過分成不同檔案、依序載入，日後在修改跟維護上會比較好管理跟減少時間。

#CSS #SCSS

YJ 的沙龍

2023/10/16

［前端］使用 npm 來編譯 SCSS

使用 SCSS 來管理 CSS 可以說是每次建置專案的起手式了，加上很常搭配客製化 Bootstrap 來開發，因此決定記錄下引入過程、遇到的錯誤訊息與解決辦法，以節省日後建置時間，如果對你也有幫助，那就太好了。

#npm #SCSS #前端

Jeremy Ho的沙龍

2023/08/15

CSS 筆記 | Sass/SCSS

這篇記錄 Sass/SCSS 編譯與語法

#CSS #SCSS

芳糖MB的沙龍

2022/04/04

【入門芳療】L3如何選擇精油及芳香療法概況

這篇來介紹如何選擇一款精油?在選擇一款精油前,建議你要先確保一些重點來挑選比較安全,因為芳香療法十分複雜,有很多原料和萃取的因素需確認,你真正需求的是哪一種精油呢?知道是哪一品種的精油來源也是十分重要,這就要稍微了解這個植物的學名和萃取來源為何?

#芳香療法 #精油 #萃取來源

芳糖MB的沙龍

2022/04/03

【入門芳療】L2植物香氣的來源及精油的萃取方式

這一篇我們來談到植物的香氣來源和精油是如何萃取出來?你知道同一種植物種在不同的環境下,竟然會產生不同的精油成份?你知道精油的價格為什麼落差這麼大?精油又有哪幾種萃取的方式將會讓精油成份發生什麼樣的變化?

#精油 #芳香療法 #精油萃取

芳糖MB的沙龍

2022/03/27

【入門芳療】L1芳香療法的歷史緣由

芳香療法是自然療法的一部分,也是植物療法的一個分支,是從植物中得到的芳香物質可以改變人的身心身心,人類運用植物已有上千年歷史,今天讓我們一起來學習有關芳香療法的發展史吧!芳香療法和植物療法,關於香水的歷史由來,芳香療法和藥物療法,芳香學又叫科學芳香療法,推進精油發展的軍醫等幾單元來介紹芳香療法的歷史

#芳香療法 #入門芳療 #基礎芳療