在 SASS 中使用媒体查询和后缀包装类列表

Question

我正在寻找一种在 SASS 中生成响应式实用程序类的方法。我有这个 CSS

.text-left { text-align: left; }
.text-right { text-align: right; }

@media (min-width: 480px) {
  .text-left-sm { text-align: left; }
  .text-right-sm { text-align: right; }
}

@media (min-width: 800px) {
  .text-left-md { text-align: left; }
  .text-right-md { text-align: right; }
}

我想补充一些，但我不想重复自己。如果 SASS 可以为我生成所有这些响应式（媒体查询）变体，那将是最好的。到目前为止，我已经能够编写一个可以使用后缀参数调用并得到我想要的东西的 mixin

@mixin textalign($suffix: "") {
  .text-left#{$suffix} { text-align: left; }
  .text-right#{$suffix} { text-align: right; }
}

@include textalign();

@media (min-width: 480px) {
  @include textalign("-sm");
}

@media (min-width: 600px) {
  @include textalign("-lg");
}

但我想更进一步，能够做这样的事情

/* Unfortunatelly this doesn't work */
@include generate-responsive() {
  .text-left { text-align: left; }
  .text-right { text-align: right; }
}

有没有办法实现这样的目标？有一个通用的 mixin 可以用来生成各种实用程序类吗？

Answer 1

我认为将选择器嵌套在@include 中时无法实现目标，但将@include 嵌套在选择器中时可以做到。

SCSS 输入：

@mixin generate-responsive() {
  // Create a list of sizes and widths
  $sizes: (
    sm: "480px",
    md: "600px",
    lg: "800px"
  );

  // Base style, without a suffix
  @content;

  // Responsive styles
  // Loop over each size
  @each $suffix, $width in $sizes {
    @media (min-width: $width) {
      &-#{$suffix} { @content; }
    }
  }
}

.text-left {
  @include generate-responsive() {
    text-align: left;
  }
}

// You'll have to include the mixin for every class
.text-right {
  @include generate-responsive() {
    text-align: right;
  }
}

CSS 输出：

.text-left {
  text-align: left;
}
@media (min-width: 480px) {
  .text-left-sm {
    text-align: left;
  }
}
@media (min-width: 600px) {
  .text-left-md {
    text-align: left;
  }
}
@media (min-width: 800px) {
  .text-left-lg {
    text-align: left;
  }
}

.text-right {
  text-align: right;
// Etc...