Sass 的 @content 指令用例

Question

我有一个关于 sass 中的@content 的小问题

我仍然不太明白如何使用它，就像我阅读的内容一样，如果您想使用 mixin 并在那里插入其他内容。

我的问题是：如果没有工作，为什么我需要使用@content？

我的例子：

@mixin context--alternate-template {
    margin: 0;
    font-size: 14px;
}

.content-sample {
  @import context--alternate-template;
  background-color: black;
}

输出CSS：

.content-sample {
  margin: 0;
  font-size: 14px;
  background-color: black;
}

我在网上看到的样本：

@mixin context--alternate-template {
    margin: 0;
    font-size: 14px;
    @content
}



.content-sample {
  @import context--alternate-template;
  background-color: black;
}

输出CSS：

   .content-sample {
      margin: 0;
      font-size: 14px;
      background-color: black;
    }

所以是的，如果没有工作，为什么我需要在 mixin 中插入 @content 。

Answer 1

@content对于在 mixin 中注入规则副本很有用。您在网上看到的示例的正确语法变为：

社会保障：

@mixin context--alternate-template {
  margin: 0;
  font-size: 14px;
  @content
}

.content-sample {
  @include context--alternate-template {
    background-color: black;
  }
}

注意@include调用后的括号。现在，您background-color: black;在font-size: 14px;.

CSS输出：

.content-sample {
  margin: 0;
  font-size: 14px;
  background-color: black;
}

在这种情况下，@content是没有用的。事实上，最有趣的用法@content是注入嵌套选择器：

社会保障：

@mixin context--alternate-template {
  margin: 0;
  font-size: 14px;
  @content
}

.content-sample {
  @include context--alternate-template {
    .important-thing {
      color: red;
    }
    &.is-italic {
      font-family: 'my-webfont-italic';
    }
  }

  // outside mixin call
  background-color: black;
}

CSS 输出：

.content-sample {
  margin: 0;
  font-size: 14px;
  background-color: black;
}
.content-sample .important-thing {
  color: red;
}
.content-sample.is-italic {
  font-family: 'my-webfont-italic';
}