1. 選擇器擴展
1. BEM 命名法（CSS 命名）
BEM 全稱為 Block Element Modifier
比如要給一個模塊取名字，步驟如下：
1. 先確定模塊的名字，如 user-card
2. 這一模塊的子代或后代元素都圍繞這個名字來命名，用兩個下劃線連接。如模塊里面的頭像用 .user-card__picture，名字用 .user-card__name，簡介用 .user-card__description。
3. 當某個元素發(fā)生狀態(tài)的變化，如 hover 或 click 時樣式改變，命名時用兩個中劃線連接。如 .user-card--active，.user-card__picture--active。
雖然 BEM 命名法邏輯清晰，且各模塊名字之間不會相互影響，但名字比較冗長，實際開發(fā)中我們可以根據(jù)這個思想改的簡潔一些，例如將 .user-card__picture--active 改寫成 .userCard-picture .active（class="userCard-picture active"）。
2. 嵌套選擇器
<div class="userCard active">
<div class="userCard-name"></div>
</div>
.userCard{
width: 100px;
.userCard-name{
color: block;
}
}
// 編譯后的 CSS
.userCard{
width: 100px; }
.userCard-name{
color: block; }
3. & 符號
.userCard{
width: 100px;
&.active{
background: orange;
}
&-name{
color: block;
}
}
4. 嵌套屬性
.userCard{
width: 100px;
font: {
size: 20px;
weight: bold;
family: 'Courier New',Courier,monospace;
}
}
2. 注釋
CSS 只能 /*單行注釋*/，SCSS 可以支持 // 單行注釋 了
如果多行注釋的第一個字母是 !，那么注釋總是會被保留到輸出的 CSS 中。
3. 變量
變量可以在多個選擇器里引用同一個數(shù)值，方便批量修改。
.userCard{
width: 100px;
&-name{
$width: 120px;
width: $width;
height: $width;
}
}
變量是有作用域的。
可以使用 !global 強行變?yōu)槿肿兞浚ú煌扑]使用）
如果定義一個變量名為 $main-width，也可以使用 $main_width訪問它。
4. 運算
- SCSS 支持數(shù)字的加減乘除（除法特殊），取模運算（判斷奇偶）
div{
width: 100px + 100px + 100px; // 加
width: 100px * 100; // 乘
width: (100px/2); // 除
width: $width/2; // 除
width: 100px/2-0; // 除
width: 101px % 2; // 取模運算，值為1，奇數(shù)
width: 100px % 2; // 取模運算，值為0，偶數(shù)
}
將 / 解析為除法的三種情況：
- 如果該值，或值的任何部分，存儲在一個變量中或通過函數(shù)返回。
- 如果該值是由括號括起來的，除非這些括號是在一個列表（list）外部，并且值是括號內(nèi)部。
- 如果該值被用作另一個算術(shù)表達式的一部分。
- 顏色相關(guān)運算
div{
$red: #FF0000;
color: $red + #888888;
}
// 運算之后的值為：
div{
color: #FF8888;
}
- 除此之外，SCSS 還提供了很多操作顏色的函數(shù)，可以對顏色進行任何操作，如：
div{
$red: #FF0000;
background: fade-out($red, 0.5); // 更改透明度
color: change-color($color:$red, $green:255); // 更改顏色
}
- 字符串插值
SCSS 支持在代碼里插入字符串或變量（#{}），如在某個元素的開頭和結(jié)尾各加一個符號，并插入變量：
div{
$red: #FF0000;
&::before{
content: '* #{$red}';
}
&::after{
content: '?';
}
}
- CSS 語法也支持運算：
div{
width: calc(200px / 2);
}
