如何使用此 mixin 获得响应式课程

Question

当我使用 mixin 时，我的 sass 文件看起来像这样：

$viewports: 25 50 75 100;
@each $viewport in $viewports {
  .vh-#{$viewport} {
    height: #{$viewport}vh;
  }
}

.vh-25 {
  height: 25vh;
}
...

但我想要那个类和带有@sm、@md、...的类 我可以用 sass 做到这一点吗？

@media (min-width: 576px) and (max-width: 767px) {
  .vh-25@sm {
    height: 25vh;
  }
}

Answer 1

@不允许在类名中，但如果你想用-替换它：

$viewports: (
  xs: 25,
  sm: 50,
  md: 75,
  xl: 100,
);

@each $viewport, $height in $viewports {
  .vh-#{$height}-#{$viewport} {
    height: #{$height}vh;
  }
}