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中注入规则副本非常有用。在网络上看到的样本的正确语法变为：

<强> SCSS：

@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最有趣的用法是注入嵌套选择器：

<强> SCSS：

@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';
}

Sass的@content指令用例

1 个答案: