Sass @mixin 和 @include



  • 定义和使用

    @mixin 指令使您可以创建要在整个网站中重复使用的 CSS 代码。
    创建 @include 指令可以帮您使用(包括)mixin。
    @mixin 指令定义 mixin。
    Sass @mixin 语法:
    @mixin name {
      property: value;
      property: value;
      ...
    }
    
    
    下面的示例创建一个名为 “important-text” 的混合:
    @mixin important-text {
      color: red;
      font-size: 25px;
      font-weight: bold;
      border: 1px solid blue;
    }
    
    
    提示:关于 Sass 中连字符和下划线的提示:连字符和下划线被认为是相同的;这意味着@mixin 重要文本 {}@mixin 重要文本 {} 被视为相同的 mixin
  • 使用 Mixin

    @include 指令用于包含混入。
    Sass @include mixin 语法:
    selector {
      @include mixin-name;
    }
    
    
    下面示例引用 @include 导入的 "important-text" 文件的混合:
    .danger {
      @include important-text;
      background-color: green;
    }
    
    
    Sass 编译后会将以上内容转换为普通 CSS:
    .danger {
      color: red;
      font-size: 25px;
      font-weight: bold;
      border: 1px solid blue;
      background-color: green;
    }
    
    
    一个 mixin 还可以包括其他 mixin
    @mixin special-text {
      @include important-text;
      @include link;
      @include special-border;
    }
    
    
  • 将变量传递给 Mixin

    Mixins 接受参数。 这样,您可以将变量传递给 mixin
    以下是定义带参数的 mixin 的方法:
    Sass 语法:
    // 用两个参数定义 mixin 
    @mixin bordered($color, $width) {
      border: $width solid $color;
    }
    
    .myArticle {
      @include bordered(blue, 1px);  // 用两个值调用mixin
    }
    
    .myNotes {
      @include bordered(red, 2px); // 用两个值调用mixin
    }
    
    
    注意,参数被设置为变量,然后用作 border 属性的值(颜色和宽度)。
    编译后,CSS 将如下所示:
    .myArticle {
      border: 1px solid blue;
    }
    
    .myNotes {
      border: 2px solid red;
    }
    
    
  • Mixin 的默认值

    您还可以为 mixin 变量定义默认值:
    Sass 语法:
    @mixin bordered($color: blue, $width: 1px) {
      border: $width solid $color;
    }
    
    
    然后,您只需要指定包含 mixin 时更改的值:
    .myTips {
      @include bordered($color: orange);
    }
    
    
  • Mixin 的属性

    mixin 的另一个好用法是用于 CSS 兼容性前缀。
    这是一个 transform 示例:
    Sass 语法:
    @mixin transform($property) {
      -webkit-transform: $property;
      -ms-transform: $property;
      transform: $property;
    }
    
    .myBox {
      @include transform(rotate(20deg));
    }
    
    
    编译后,CSS 将如下所示:
    .myBox {
      -webkit-transform: rotate(20deg);
      -ms-transform: rotate(20deg);
      transform: rotate(20deg);
    }