SCSS是一款強(qiáng)化CSS的輔助工具捶索，它在語法的基礎(chǔ)上增加了變量蜈膨，嵌套躺翻，混合鳞芙，導(dǎo)入等高級功能
SCSS嵌套功能
SCSS允許將一套CSS樣式嵌套進(jìn)另一套樣式中眷柔，內(nèi)層的樣式將它外層的選擇器作為父選擇器。父選擇器中用&表示當(dāng)前父選擇器原朝。同時支持屬性嵌套驯嘱，例如字體嵌套
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
SCSS變量
SCSS定義變量的格式是$變量名:變量內(nèi)容
$width:12px;
變量支持塊級作用域，嵌套規(guī)則內(nèi)定義的變量只能在嵌套規(guī)則內(nèi)使用喳坠【掀溃可以將局部變量轉(zhuǎn)換成全局變量可以添加!global聲明
#main {
$width: 5em !global;
width: $width;
}
SCSS的包括6中數(shù)據(jù)類型
- 數(shù)字 1，2壕鹉，3 10px
- 字符串 有引號字符串和無引號字符串
- 顏色 blue
- 布爾值 true false
- 空值 null
- 數(shù)組 用空格或者逗號分隔符號
- map
注意
字符串可以使用插值(${})
運(yùn)算
SCSS支持?jǐn)?shù)字的加減乘除剃幌，取整等運(yùn)算。關(guān)系運(yùn)算也可以用于數(shù)字運(yùn)算
引入
SCSS擴(kuò)展了@important的功能.@important尋找SCSS文件并將其導(dǎo)入晾浴，但是以下情況@import僅僅作為普通的scss文件锥忿，不會導(dǎo)入Scss文件
- 文件擴(kuò)展名.css
- 文件名以HTTP：//開頭
- 文件名是url（）
- @import 包括media queries
如果@important在嵌套內(nèi)導(dǎo)入，那么就是把導(dǎo)入的內(nèi)容添加到父嵌套中
@extend
div class="error seriousError">
Oh no! You've been hacked!
</div>
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
//實際是
.error怠肋，.seriousError {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
