$ 变量名

在 scss 中，可以声明 $ 开头的变量名，作为常量在下文中使用

示例如下

$color: #ababab;
#app{
    background-color: $color;
}

这样就可以将 #app 的背景色设为 #ababab

嵌套层级

在 scss 中，包含关系可以直接写在嵌套中，不需要像 css 一样全部写在根

设有如下 DOM 结构

<body>
    <div id="app">
        <span class="title">标题</span>
        <div class="content">
            内容
        </div>
    </div>
</body>

则如果要分别设置标题和内容部分的样式，并给 #app 设置 hover 样式，在原生 css 中，要这么写

#app>.title{
    xxx
}
#app>.context{
    yyy
}
#app:hover{
    zzz
}

而在 scss 中，只需要这么写

#app{
    >.title{
        xxx
    }
    >.content{
        yyy
    }
    &:hover{
        zzz
    }
}

对于子元素选择器，可以直接嵌套书写

对于伪元素、伪类，需要使用 & 来作为当前层级的标识符

在上文中的 &:hover 等效于 #app:hover

mixin

当有一套固定的模式 css 要适用于多种不同属性时，可以使用 @mixin 语法

类似于 css 中的 function

设有如下 mixin

@mixin layout($color){
    &:hover{
        background-color:$color;
    }
}

则表示声明了一个函数 layout，要求传入一个变量，在函数中设为 hover 状态下的背景色

声明之后，使用 include 进行混入

include

设有上述 mixin，则可以按不同情况混入

比如要在 .title 和 .content，分别适配不同的背景色，则可以有如下写法

#app{
    >.title{
        $color: blue;
        @include layout($color);
    }
    >.content{
        $color: yellow;
        @include layout($color);
    }
    $color: red;
    @include layout($color);
}

等效于写作

#app{
    >.title{
        &:hover{
            background-color: blue;
        }
    }
    >.content{
        &:hover{
            background-color: yellow;
        }
    }
    &:hover{
        background-color: red;
    }
}

可见，mixin 和 include 是搭配使用的，且使用效果为直接替换在原位

感谢阅读