Angular SassSass-loader Angular 13Angular scss assetsSass @importScss import tilde node_modulesSass tilde deprecatedSCSS/CSS 學習筆記
文章推薦指數： 80 %
Sass/Scss運作. 早期Sass底層是以Ruby語言來撰寫，因此要使用Sass需要有Ruby環境，但官方已經於2019/03 ...
Published
LinkedwithGitHub
Like6
Bookmark
Subscribe
#SCSS/CSS學習筆記
######tags:`OKR``SCSS`
#####2020/05/24(Update:2020/06/23)
##網站資源
[SCSS官方網站](https://sass-lang.com/)
[SCSS官方網站-中文](https://sass.bootcss.com/)
##Sass/Scss運作
早期Sass底層是以Ruby語言來撰寫，因此要使用Sass需要有Ruby環境，但官方已經於2019/03/26表示不再維護RubySass!現階段比較主流的是DartSass及LibSass，DartSass可讓Sass被編譯到JavaScript庫中，而LibSass最常見的就是因應Node.js而推出的Node-sass，目前我們正在使用的則是LibSass。
##Scss與Sass差異
###CSS寫法
```
.menu{..}
.menuul{..}
.menuli{..}
.menua{..}
```
###SCSS寫法
目前公司也是採用SCSS，優點如下：
-相關教學可參考SCSS官方網站
-因為撰寫風格跟CSS很像，巢狀式架構可把區塊群組化，但要記得階層性建議不要超過3~4層內會比較好，以避免影響網頁渲染效能。
還有層次結構變多的，反而會讓CSS變的更不彈性，反而不好維護。
-可以兼容CSS，應用到比CSS更強大的變數功能。
```
.menu{..}
.menuul{..}
.menuli{..}
.menua{..}
```
###SASS寫法
可少寫括號與分號，但若資料量越大後，自己閱讀性不太容易判別錯誤，目前也不太習慣使用這種寫法
```
.menu
..
ul
..
li
..
a
..
```
##SCSS引用管理
-SCSS的好處是可以讓專案各頁功能所需要的樣式群組化，不用通通擠在同一支CSS底下去撰寫，可以寫入很多支的SCSS，藉由引用(import)來彙整編譯成一支CSS。
-參考學習[sass-7＋1結構](https://gist.github.com/rveitch/84cea9650092119527bc)
###模組化管理
依專案所需規劃可建立一支專門引用SCSS的管理頁，這樣可以很清楚知道專案有引用那些SCSS
規劃檔案的結構
```sass
(有底線代表不會被編譯成一支檔，合併使用)
_variable.scss//專門放相關變數
_mixin.scss//專門放相關mixin函式
_mixinRwd.scss//rwdmedia
_base.scss//全域設定SCSS
_index.scss//專案頁面SCSS
```
例如建立一支main.scss
依據上方的結構，這頁專門import上述的scss＝＝＞最後編譯成main.css
引用格式如下：
```sass
@import"variable";
@import"mixin";
@import"mixinRwd";
@import"base";
//你也可以建立分類的資料夾
@import"/page/index";
@import"abstracts/variables","abstracts/functions","abstracts/mixins";
```
也可以導入CSS文件
ImportswheretheURLendswith.css.
ImportswheretheURLbeginshttp://orhttps://.
ImportswheretheURLiswrittenasaurl().
```sass
@import"theme.css";
@import"http://fonts.googleapis.com/css?family=Droid+Sans";
@importurl(theme);
```
##SCSS使用
###支援類別(ValueTypes)
-Numbers：可能有也可能沒有單位，例如12或100px。
-Strings：可以帶或不帶引號，例如"HelveticaNeue"或bold。
-Colors：可以通過其十六進制表示形式或名稱（如#c6538c或）來引用，也可以blue從函數（如rgb(107,113,127)或）返回hsl(210,100%,20%)。
-Listsofvalues：可以由空格或逗號並且其可以被包含在方括號或沒有括號可言，等進行分離1.5em1em02em，Helvetica,Arial,sans-serif或[col1-start]。
-boolean：true和false。
-null：預設先給空值。
-Maps：將值與鍵相關聯的地圖，例如("background":red,"foreground":pink)
###註解功能
有兩種註解方式：
-使用「//」兩個斜線來備註內容，而這些內容不會被SCSS編譯出來，只有自己才會看得到。
-若是想要被顯示出來，則使用「/*標註文字內容*/」
###文檔註解功能
在@mixin中我們可以增加各種功能詳細描述，可參考`project_template`公司公版，裡面正在慢慢擴充一些常用的@mixin，以便共享於各專案使用。
使用「///」符號來註解，更多的註解用途可參考[SassDoc](http://sassdoc.com/annotations/)
```sass
@example描述功能名稱，實際應用在什麼地方
@param是用來記錄@mixin或function的參數
///@exampletab分頁樣式-4種樣式
///@param{String}$tab-type參數請填tab名稱，預設為'underLineTab'
///@param{Size}$line_Height參數請填tab底線高度,預設為'3px'
///@param{Color}$line_Color參數請填底線顏色
```
###變數功能Variable
-客製變數設定，變數名稱前面記得都要加`$`符號
-相同的變數名稱，擺在後面的會蓋掉前面的。
-變數名稱，可以使用「-」「_」，官方提到$font-size和&font_size都會引用相同的變數，請二選一。
-將變數放到相同需要對應的SCSS裡面，CSS編譯結果會自動顯示出來
####基本變數寫法
```sass
//變數設定
$text-color:#3F51B5;
$font-xl:20px;
//將變數放置對應地方
.abc{
font-size:$font-xl;
background:$text-color;
border:1pxsolid$text-color;
color:red;
}
```
編譯結果如下
```sass
.abc{
font-size:20px;
background:#3F51B5;
border:1pxsolid#3F51B5;
color:red
}
```
###進行數值運算calc()
-可以進行加減乘除的運算，也可能定位。
-必須注意在使用+和-的時候，在前後一定要加上空白，不然會被誤為是給了個負值。
*和/可以不用加，但為了格式統一方便和閱讀建議還是加一下。
-要注意若是加上其它變數一起計算，要記得變數因為是字串，所以要記得要上#{變數名稱}
```sass
/*加減乘除運算*/
width:calc(100%-50px);
/*定位*/
top:calc(50%-1px);
/*變數計算，記得加上字串辨識*/
line-height:calc(#{$select-height}-15px);
```
###選擇器selector應用組合
符號可以放在第一層，也可以放第二層，或是在兩者的之間
```sass
ul>{
li{
list-style-type:none;
}
}
h2{
+p{
border-top:1pxsolidgray;
}
}
p{
~{
span{
opacity:0.8;
}
}
}
```
-星號*可以同時被用於子對象選擇器中
```sass
#container*{
border:1pxsolidblack;
}
```
-X+Y相鄰兄弟選擇器
選擇後面同層的第一個元素class賦予狀態
```sass
/*h2相鄰的兄弟p，增加border-top灰線*/
h2{
+p{
border-top:1pxsolidgray;
}
}
```
-X～Y相鄰兄弟選擇器
選擇後面同層的所有相同class賦予狀態
```sass
/*h2相鄰的所有兄弟p，增加border-top灰線*/
p{
~{
span{
opacity:0.8;
}
}
}
```
-&替代符號
```sass
p{
&:hover{}
.active&{}
:not(&){}
}
```
```sass
/*編譯結果*/
p:hover{}
.activep{}
:not(p){}//選擇所有不是p的元素，[補充]:not它的作用是防止特定的元素被選中
```
&符號搭配BEM結構撰寫時非常好用，而無須多次撰寫較長的class，看以下範例就可以得知，目前公司專案也是儘量採BEM結構模式撰寫。
```sass
.accordion{
/*...*/
&__copy{
/*...*/
&--open{
/*...*/
}
}
}
```
```sass
/*編譯結果*/
.accordion{/*...*/}
.accordion__copy{/*...*/}
.accordion__copy--open{/*...*/}
```
-#{}插入值
通常會應用在放入className，或是css名稱，css名稱可拿來應用在有多種屬性值時，例如left/right/top/bottom，範例如下
```sass
@mixinxxx($className,$top-or-bottom,$left-or-right){
.icon-#{$className}{
#{$top-or-bottom}:0;
#{$left-or-right}:0;
}
}
@includexxx('mail',top,right)
```
```sass
/*編譯結果*/
.icon-mail{
top:0;
right:0;
}
```
-CSS-nth-child選擇器
```sass
/*first-child代表第一個*/
li:first-child{
border:0;
border-top-left-radius:$border-radius;
border-top-right-radius:$border-radius;
}
/*last-child代表最後一個*/
li:last-child{
border:0;
border-bottom-left-radius:$border-radius;
border-bottom-right-radius:$border-radius;
}
/*nth-child(n)代表指定選擇第幾個，從(1)開始*/
li:nth-child(1){
border:0;
border-bottom-left-radius:$border-radius;
border-bottom-right-radius:$border-radius;
}
/*nth-child(odd)奇數*/
p:nth-child(odd){
background:red;
}
/*nth-child(even)偶數*/
p:nth-child(even){
background:blue;
}
/*:nth-child(an+b)若是使用計算方式，n則可從(0)開始*/
tr:nth-child(3n+1){
background-color:#69C;
}
```
-unique-id()自動產出名稱
官方有這個功能，會自動產生9個字串的字母數字，例如"uat4r38ew"，雖然目前未曾實際應用於專案上，但有篇文章提到可以使用在CSSCache上感覺滿適合的，可參考下方連結：
[SCSSUniqueIdforCacheBustingyourCSS](https://medium.com/@defrian.yarfi/sass-unique-id-for-cache-busting-your-css-fbb58d126d2d)
所謂CSSCache緩衝是以前有曾經遇過的狀態，就是SCSS內裡面可能會引用CSS/圖片等，但有可能發生有檔案名稱一樣，但有新版本資料，卻發生明明已更新資料，但網頁上看到的是舊資料問題，這時候就可以透過添加版本參數來更新。
```sass
/*上方文章分享-圖片緩衝*/
$ver:unique_id();
@mixinimageCacheBust($url){
background-image:#{'url("'}#{$url}#{'?v='}#{$ver}#{'")'};
}
.sprite{
@includeimageCacheBust('asset/images/logo.png');
}
```
```sass
/*編譯結果*/
.sprite{
background-image:url('asset/images/logo.png?v=u95ab40e0');
}
```
###SassMap變數組合應用
Sassmap是類似json的一種變數，可以使用SassMap來定義基本的元件變數，與json最大的差異是使用`()`取代`{}`。
三種function
```sass
//列出指定map的key
map-keys($map)
//列出指定map的value
map-values($map)
//判別布林值trueorfalse
map-has-key($map,$key)
```
```sass
$color:(
primary:#cccccc;
secondary:#000000;
)
/*編譯結果*/
//以下只是展示範例回傳的結果，僅供參考
map-keys($color,primary);
.test{
color:primary
}
map-values($color,#cccccc);
.test{
color:#cccccc
}
map-has-key($color,primary);
.test{
color:true
}
```
#####範例一顏色組合
```sass
/*variables組合*/
//"$key":$value
//可以依據不同的元件用一個群組，方便辨識，例如border.button.text.link..等等
$primary-color:#098081;
$primary2-color:#c4dbd5;
$primary3-color:#6e6d6d;
//可以在依網站的顏色去自訂名稱，方便記憶
$border-set:(
"border-primary1":$primary-color,
"border-primary2":$primary2-color,
"border-primary3":$primary3-color
);
```
```sass
/*variables使用*/
//使用map-get()取值
.button{
color:map-get($border-set,border-primary3)
}
```
#####範例二按鈕組合
上面是只有單純顏色的組合，若像是按鈕這種會包含多樣式種類的，可以寫成以下組合
```sass
/*variables組合*/
//定義按鈕的不同狀態設定
$btn-config:(
default:(
class:'default',
color:#333,
bg:#fff,
border-color:#ccc
),
primary:(
class:'primary',
color:#fff,
bg:#009AFF,
border-color:#009AFF
),
danger:(
class:'danger',
color:#fff,
bg:#D84315,
border-color:#009AFF
)
);
```
然後賦予基本button的結構＋搭配mixin()來完成多組按鈕組合，詳細可參考分享網站[透過SassMap製作多個樣式](https://wcc723.github.io/css/2016/12/25/sass-map/)
```sass
/*首先刻出一個按鈕基本結構*/
.btn{
/*......*/
&:hover,&:focus{
color:#333;
background-color:#e6e6e6;
}
}
/*@mixin*/
//通常按鈕結構最常變更的是背景顏色、外框顏色、還有文字顏色
@mixinbutton-set($color,$background,$border-color){
color:$color;
background-color:$background;
border-color:$border-color;
&:hover,&:focus,&:active{
color:$color;
background-color:darken($background,5%);
border-color:darken($border-color,5%);
}
}
```
```sass
/*@each+map-get()+@include*/
//$key,$value
@each$keyname,$valuein$btn-config{
$class:map-get($value,class);
$color:map-get($value,color);
$bg:map-get($value,bg);
$border-color:map-get($value,border-color);
.btn-#{$class}{
@includebutton-set($color,$background,$border-color)
}
}
```
```htmlmixed
/*html結構*/
//這樣就可以寫出類似像bootstrapbtn不同class的btn
以下為一個簡單的例子，實際專案下執行webpack編譯時就會看到訊息。
但另外有發現VscodeLiveSass使用@debug不會出現，看了一下它的說明與更新內容好像本來就沒有進一步支援。
```sass
$font-sizes:10px+20px;
$style:(
color:#bdc3c7
);
.container{
@debug$style;
@debug$font-sizes;
}
```
```sass
/*打印結果，會出現類似畫面*/
Line7CSS:(color:#bdc3c7)
Line8CSS:30px
```
###@at-root跳脫子層
可以將一個或多個樣式規式跳出子層，而不是嵌在父層selector裡面，範例如下：
```sass
.parent{
...
@at-root.child{....}
}
```
```sass
/*編譯結果*/
.parent{...}
.child{...}
```
```sass
.parent{
...
.step-child{...}
@at-root{
.child1{...}
.child2{...}
}
}
```
```sass
/*編譯結果*/
.parent{...}
.parent.step-child{...}
.child1{...}
.child2{...}
```
###@use與@forward
分享一篇看到寫的很清楚的文章，文章提到[詳解Sass新特性-模塊](https://blog.csdn.net/qq_36380426/article/details/103502336)的內容。
內容提到sass團隊正在推行sass模塊化機制，建議大家使用@use.@forward，但目前僅DartSass1.23.0完全支援這兩種特性，加上[官網@import說明](https://sass.bootcss.com/documentation/at-rules/import)上也有提到Sass團隊不鼓勵繼續使用@import規則，預計在未來幾年會逐步淘汰它，雖然還不是現在，但或許在淘汰前可能要慢慢去研究@use+@forward。
文件中提到@use與@import最主要的差異(待須實際試用)：
@import：假如不同的頁面引用了相同的scss，樣式可能會被重覆加載，導致重複代碼
@use：不管使用了多少次樣式表，都只會引用和執行一次
6
×
Signin
Email
Password
Forgotpassword
or
Byclickingbelow,youagreetoourtermsofservice.
SigninviaFacebook
SigninviaTwitter
SigninviaGitHub
SigninviaDropbox
SigninviaGoogle
NewtoHackMD?Signup
延伸文章資訊
- 1Sass/SCSS 入門：變數、巢狀、混入、繼承 - HackMD
tags: `HTML & CSS` `SASS` `CSS 預處理器` # Sass/SCSS 入門：變數、巢狀、混入、繼承其實過去在Lidemy 課程中，也有提過CSS 預處.
- 2更便利於撰寫與管理CSS 的工具- Sass / SCSS，如何使用
如何編譯Sass / SCSS 語法？ 這邊有兩個編譯器可以跟大家介紹：. Prepros; VS code 擴充套件：Live Sass Compiler. 不過 ...
- 3Sass/SCSS 基本語法介紹，搞懂CSS 預處理器
現今較為主流的CSS 預處理器有三種，分別是Sass/SCSS、Less、Stylus，其中的Sass/SCSS 是目前最多人使用也相對較成熟的選擇。CSS preprocessor（CSS ...
- 4Day02::方便又好用的SCSS - iT 邦幫忙
什麼是SCSS. SCSS是個能用更有效率的方法來編寫CSS的程式語言語法跟CSS大同小異，但是比CSS來得好寫且更容易閱讀. SASS跟SCSS差別在那? 個人覺得這兩者最明顯的差異 ...
- 51-3 Sass 和SCSS 有什麼區別？
文件擴展名不同，Sass 是以“.sass”後綴為擴展名，而SCSS 是以“.scss”後綴為擴展名 · 語法書寫方式不同，Sass是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)...
