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