Question

当我使用mixin时，我的sass文件如下所示：

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

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

但是我想要那个类以及带有@ sm，@ md等的类…… 我可以用无礼的事吗？

@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;
  }
}

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

1 个答案: