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可以为我生成所有那些响应式（媒体查询）变体。到目前为止，我已经能够编写可以用后缀param调用的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...

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

1 个答案: