Sass混合指令@mixin和@include用法示例

Sass混合指令 @mixin和@include 用法示例

本文内容来自官网文档：https://www.sass.hk/docs/ 

 

混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的class，比如.float-left。混合指令可以包含所有的CSS规则，绝大部分Sass规则，甚至通过参数功能引入变量，输出多样化的样式。

 

定义混合指令@mixin

mixin.scss

@mixin large-text {
    font: {
        family: Arial;
        size: 20px;
        weight: bold;
    }
    color: #ff0000;
}

 

 

引用混合指令@include
使用@include指令引用混合样式，格式是在其后添加混合名称，以及需要的参数（可选）。

main.scss

@import "mixin";

.page-title {
    @include large-text;
    padding: 4px;
    margin-top: 10px;
}

 

编译为：

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }