如何在支持内容块的支持下创建SASS Mixin别名

Question

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

定义

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

错误消息

混音"大折叠点"不接受内容块。

Answer 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/gist/3109af060293eeed0b89a222c27fa20fa20527