Сохранять mixin в параметре mixin с помощью SASS

Question

У меня есть код, который создает необходимые стили с запросом в классе. Что я хочу заработать:

@mixin views ($mixinToApply) {
  @include $mixinToApply;
  &-from-tablet {
    @media only screen and (min-width: 768px) {
      @include $mixinToApply;
    }
  }
  &-from-desktop {
    @media only screen and (min-width: 1280px) {
      @include $mixinToApply;
    }
  }
}

$colors: (
  red, blue, purple
);

@mixin setColors {
  @each $color in $colors {
    &-#{$color} {
      color: $color;
    }
  }
}

.colors { @include setColors }

/*
it will set the colors initially, but if I want to change colors
if the window reaches the breakpoint, we'd need something like this
*/

.colors { @include views ($setColors) }

Это может сэкономить много времени, если у нас будет несколько миксов. Их нужно будет обработать только через views.

Есть идеи, как достичь вышеуказанного эффекта?

Answer 1

Вы можете попробовать использовать @content; для передачи некоторых дополнительных правил в mixin:

@mixin views () {

  @content;

  &-from-tablet {
    @media only screen and (min-width: 768px) {
      @content;
    }
  }

  &-from-desktop {
    @media only screen and (min-width: 1280px) {
      @content;
    }
  }
}

$colors: (
  red, blue, purple
);

@mixin setColors {
  @each $color in $colors {
    &-#{$color} {
      color: $color;
    }
  }
}

.colors { @include setColors }

/*
it will set the colors initially, but if I want to change colors
if the window reaches the breakpoint, we'd need something like this
*/

@mixin mixinToApply() {
  font-size: 14px;
}

.colors {
  @include views () {
    @include mixinToApply;
  }
}

Вывод Css:

.colors-red {
  color: red;
}

.colors-blue {
  color: blue;
}

.colors-purple {
  color: purple;
}

/*
it will set the colors initially, but if I want to change colors
if the window reaches the breakpoint, we'd need something like this
*/
.colors {
  font-size: 14px;
}

@media only screen and (min-width: 768px) {
  .colors-from-tablet {
    font-size: 14px;
  }
}

@media only screen and (min-width: 1280px) {
  .colors-from-desktop {
    font-size: 14px;
  }
}

Но зачем вам одинаковые стили для всех точек останова?

Демо