Как я могу получить адаптивные занятия с этим миксином

Question

Мой 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;
  }
}