如何创建支持内容块的 Sass 混合别名？

【问题标题】：How to create Sass mixin aliases with support for content blocks?如何创建支持内容块的 Sass 混合别名？
【发布时间】：2018-10-06 21:27:58
【问题描述】：

如何为同一个 mixin 定义多个名称，并支持内容块？

定义

@mixin desktop-breakpoint {
   @media only screen and (min-width: 769px) {
      @content;
   }
}

@mixin large-breakpoint {
   @include desktop-breakpoint;
}

用法

.my-class {
   font-size: small;

   @include desktop-breakpoint {
      font-size: big;
   }
}

.my-other-class {
   color: red;

   @include large-breakpoint {
      color: blue;
   }
}

错误信息

mixin“大断点”不接受内容块。

【问题讨论】：

标签： css sass scss-mixins

【解决方案1】：

在 large-breakpoint mixin 中使用 @include desktop-breakpoint 时，您没有传递任何 @content。这样做将修复您的编译错误：

@mixin large-breakpoint {
   // Remember to pass content received by mixin to @include
   @include desktop-breakpoint {
     @content;
   }
}

然后您的 CSS 将按预期正确编译：

.my-class {
  font-size: small;
}
@media only screen and (min-width: 769px) {
  .my-class {
    font-size: big;
  }
}

.my-other-class {
  color: red;
}
@media only screen and (min-width: 769px) {
  .my-other-class {
    color: blue;
  }
}

根据您修改的代码查看概念验证示例：https://www.sassmeister.com/gist/3109af060293eed0b89a22c27fa20527

【讨论】：