SCSS入門 - 在Vue中使用SCSS
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/
即將進入廣告，捲動後可繼續閱讀
為什麼會看到廣告
20會員
161Content count
留言0
查看全部
你可能也想看
八十-二十法則提到，在多數生活的現象中，約80%的效果是來自於20%的原因，除了經濟學、學習理論外，這個法則同樣也可以應用在生活中的幸福感上。
我們需要認知到擁有的越多不一定會越快樂，反而有可能會因為無法專注在少數事物上而產生空虛、迷茫的感覺。「極簡」精神最重要的一點在於放下對於「多」的執著，將有
1.加權指數與櫃買指數
週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
心理師沒辦法告訴你人生標準的答案，但能協助你找到屬於你自己的答案
下定決心要諮商的那一刻，需要鼓起勇氣，算一算一個療程需要花費大筆金錢，投入不少時間，甚至諮商時需要談自己內心深處的事，對很多人來說是一個相當不容易的嘗試，因此在諮商前許多人會陷入掙扎，該如何找到適合的心理師呢?
我在準備進入切版的第一步通常會是設定好全域樣式，以及整理出有哪些共用樣式，也就是把設計稿上規範好的設計系統，例如顏色、間距、字體等等先寫好 CSS，而我自從會 SCSS 後就習慣用這個方式去寫 CSS，透過分成不同檔案、依序載入，日後在修改跟維護上會比較好管理跟減少時間。
使用 SCSS 來管理 CSS 可以說是每次建置專案的起手式了，加上很常搭配客製化 Bootstrap 來開發，因此決定記錄下引入過程、遇到的錯誤訊息與解決辦法，以節省日後建置時間，如果對你也有幫助，那就太好了。
這篇來介紹如何選擇一款精油?在選擇一款精油前,建議你要先確保一些重點來挑選比較安全,因為芳香療法十分複雜,有很多原料和萃取的因素需確認,你真正需求的是哪一種精油呢?知道是哪一品種的精油來源也是十分重要,這就要稍微了解這個植物的學名和萃取來源為何?
這一篇我們來談到植物的香氣來源和精油是如何萃取出來?你知道同一種植物種在不同的環境下,竟然會產生不同的精油成份?你知道精油的價格為什麼落差這麼大?精油又有哪幾種萃取的方式將會讓精油成份發生什麼樣的變化?
芳香療法是自然療法的一部分,也是植物療法的一個分支,是從植物中得到的芳香物質可以改變人的身心身心,人類運用植物已有上千年歷史,今天讓我們一起來學習有關芳香療法的發展史吧!芳香療法和植物療法,關於香水的歷史由來,芳香療法和藥物療法,芳香學又叫科學芳香療法,推進精油發展的軍醫等幾單元來介紹芳香療法的歷史
因為時間不夠，所以更要了解適合自己的入門方法
既然全部都學學不完，那就隨便選一項有興趣的技能來學吧？
在選擇學習技能這件事上，或許我們也能借鏡AI學習法，選擇一項子領域深入研究，在練習過程中自然會遇到需要解決的問題或他人回饋而習得額外的知識，最終提升到能夠在該領域獨立解決問題的能力...
在開發產品過程中，不難發現研發和設計團隊時常因各自所處的角度不同，使得在溝通來回上花了不少時間。所以小弟整理些過去常在工作場景下遇到的一些資訊技術的專有名詞，化解那些雞同鴨講的無效溝通。
八十-二十法則提到，在多數生活的現象中，約80%的效果是來自於20%的原因，除了經濟學、學習理論外，這個法則同樣也可以應用在生活中的幸福感上。
我們需要認知到擁有的越多不一定會越快樂，反而有可能會因為無法專注在少數事物上而產生空虛、迷茫的感覺。「極簡」精神最重要的一點在於放下對於「多」的執著，將有
1.加權指數與櫃買指數
週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
心理師沒辦法告訴你人生標準的答案，但能協助你找到屬於你自己的答案
下定決心要諮商的那一刻，需要鼓起勇氣，算一算一個療程需要花費大筆金錢，投入不少時間，甚至諮商時需要談自己內心深處的事，對很多人來說是一個相當不容易的嘗試，因此在諮商前許多人會陷入掙扎，該如何找到適合的心理師呢?
我在準備進入切版的第一步通常會是設定好全域樣式，以及整理出有哪些共用樣式，也就是把設計稿上規範好的設計系統，例如顏色、間距、字體等等先寫好 CSS，而我自從會 SCSS 後就習慣用這個方式去寫 CSS，透過分成不同檔案、依序載入，日後在修改跟維護上會比較好管理跟減少時間。
使用 SCSS 來管理 CSS 可以說是每次建置專案的起手式了，加上很常搭配客製化 Bootstrap 來開發，因此決定記錄下引入過程、遇到的錯誤訊息與解決辦法，以節省日後建置時間，如果對你也有幫助，那就太好了。
這篇來介紹如何選擇一款精油?在選擇一款精油前,建議你要先確保一些重點來挑選比較安全,因為芳香療法十分複雜,有很多原料和萃取的因素需確認,你真正需求的是哪一種精油呢?知道是哪一品種的精油來源也是十分重要,這就要稍微了解這個植物的學名和萃取來源為何?
這一篇我們來談到植物的香氣來源和精油是如何萃取出來?你知道同一種植物種在不同的環境下,竟然會產生不同的精油成份?你知道精油的價格為什麼落差這麼大?精油又有哪幾種萃取的方式將會讓精油成份發生什麼樣的變化?
芳香療法是自然療法的一部分,也是植物療法的一個分支,是從植物中得到的芳香物質可以改變人的身心身心,人類運用植物已有上千年歷史,今天讓我們一起來學習有關芳香療法的發展史吧!芳香療法和植物療法,關於香水的歷史由來,芳香療法和藥物療法,芳香學又叫科學芳香療法,推進精油發展的軍醫等幾單元來介紹芳香療法的歷史
因為時間不夠，所以更要了解適合自己的入門方法
既然全部都學學不完，那就隨便選一項有興趣的技能來學吧？
在選擇學習技能這件事上，或許我們也能借鏡AI學習法，選擇一項子領域深入研究，在練習過程中自然會遇到需要解決的問題或他人回饋而習得額外的知識，最終提升到能夠在該領域獨立解決問題的能力...
在開發產品過程中，不難發現研發和設計團隊時常因各自所處的角度不同，使得在溝通來回上花了不少時間。所以小弟整理些過去常在工作場景下遇到的一些資訊技術的專有名詞，化解那些雞同鴨講的無效溝通。