Оберните список классов медиазапросами и суффиксом в 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 мог сгенерировать все эти варианты ответа (медиа-запрос) для меня. До сих пор я мог написать миксин, который мог бы вызывать с суффиксом param и получить то, что я хочу

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

Есть ли способ достичь чего-то подобного? Имеете универсальный миксин, который я могу использовать для генерации всех видов служебных классов?

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...