$red-color: #6f0; // 變量
.userCard {
width: 100px;
&.active { // &符號(hào)
background: yellow;
}
&-name {
color: black;
&:hover {
color: $red-color;
}
font: { // 屬性連寫時(shí)
size: 28px;
weight: bold;
family: 'Courier New', Courier, monospace;
}
}
一、變量以 $ 開(kāi)頭
二、&、#{}(類似與js的模版字符串的變量寫法#{$font-size})
以下寫法會(huì)被翻譯成
.userCard {
width: 100px;
&.active {
background: yellow;
}
&-name {
color: black;
}
}
這樣
.userCard {
width: 100px;
}
.userCard.active {
background: yellow;
}
.userCard-name {
color: black;
}
三末秃、屬性連寫
以下寫法
.userCard-name {
color: black;
font: {
size: 28px;
weight: bold;
family: 'Courier New', Courier, monospace;
}
}
等同于
.userCard-name {
color: black;
font-size: 28px;
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
}
四、加減乘除運(yùn)算（特別注意/在某些情況下會(huì)被css當(dāng)作簡(jiǎn)寫屬性的間隔符）
五籽御、函數(shù)
一個(gè)響應(yīng)式移動(dòng)端的函數(shù)栗子：
@function px($npx) {
@return $npx/375 * 100vw;
}
六练慕、@content
// 定義
@mixin phone {
@media (max-width: 500px) {
@content;
}
}
// 使用
@include phone {
/* // 這一注釋部分會(huì)被直接代替上面函數(shù)`@content`
> ul {
display: none;
}
*/
}
