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) }

如果我们有多个mixin，则可以节省很多时间。它们只需要通过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;
  }
}

但是为什么所有断点都需要相同的样式？

Demo

使用SASS将mixin存储在mixin的参数中

1 个答案: