-1

My sass file looks like this when I use my mixin:

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

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

But I want that class and the class with the @sm, @md, … Can I do that with sass?

@media (min-width: 576px) and (max-width: 767px) {
  .vh-25@sm {
    height: 25vh;
  }
}
Goestav
  • 37
  • 1
  • 7

1 Answers1

1

@ is not allowed in class name, but if you want to replace it with -:

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

@each $viewport, $height in $viewports {
  .vh-#{$height}-#{$viewport} {
    height: #{$height}vh;
  }
}
mwl
  • 1,448
  • 14
  • 18
  • Is there a good way to get that mixin inside `@media (min-width: 576px) and (max-width: 767px) {…}` without putting the mixin between the media query? – Goestav Sep 09 '18 at 09:50
  • Nevermind, I found a solution. Thanks for answering anyway – Goestav Sep 09 '18 at 09:59