sass - 如何使用此 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;
  }
}