Sass 如何使用此mixin获得响应类

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

---

类名称中不允许使用

@

，但如果要将其替换为

-

：

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

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

---

那么，让你的

$viewports

成为一个

地图

。有没有一个好方法可以在

@media（最小宽度：576px）和（最大宽度：767px）{…}

中获得混音，而不用将混音放在媒体查询之间？不管怎样，我找到了一个解决方案。谢谢你的回答