@content对于在mixin中插入规则副本非常有用。

SCSS：

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

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

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

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

@content的另一个用例帮助我看到了它的价值-媒体查询
SCSS：

@mixin desktop {
    @media screen and (min-width: $desktop-size) {
        @content;
    }
}

.main {
    display: flex;
    flex-direction: row;
    
    
    @include desktop{
        flex-direction: column;
    }
}

CSS输出

.main {
  display: flex;
  flex-direction: row;
}
@media screen and (min-width: 60rem) {
  .main {
    flex-direction: column;
  }
}