борется с sass каждый вывод пуст

Question

Я собираюсь попробовать что-то похожее на это: https://stackoverflow.com/a/8380156/2309928

У меня есть этот код scss:

$max-width: 95vw;
$max-height: 95vh;

$styleFactors: ("very-large": 1, "large": 0.75, "normal": 0.4, "small": 0.35);

@each $widthOrHeight in "width", "height"{

  @each $style, $factor in $styleFactors {

    $max-size: if($widthOrHeight == "width", $max-width, $max-height);
    .#{$widthOrHeight}-#{$style} {
      $style: calc(#{$max-size} * #{$factor});
    }
  }
}

ожидаемый результат должен выглядеть примерно так:

.width-very-large{
  width: calc(95vw * 1);
}
.width-large{
  width: calc(95vw * 0.75);
}
.width-normal{
  width: calc(95vw * 0.4);
}
.width-small{
  width: calc(95vw * 0.35);
}
//...
//and same with height

но нет вывода вообще и у меня нет идей, почему это происходит ..

нет ошибок или чего-то еще

Попробуйте Sassmeister

Answer 1

обновлено Sassmeister :

ошибка была в строке 17:

$max-width: 95vw;
$max-height: 95vh;

$styleFactors: ("very-large": 1, "large": 0.75, "normal": 0.4, "small": 0.35);

@each $widthOrHeight in "width", "height"{

  @each $style, $factor in $styleFactors {

    $max-size: if($widthOrHeight == "width", $max-width, $max-height);
    .#{$widthOrHeight}-#{$style} {

    #{$widthOrHeight}: calc(#{$max-size} * #{$factor});

    }
  }
}

Answer 2

Вы фактически не применяете никаких стилей, а пустые стили просто удаляются.Если вы добавите, например, #{$widthOrHeight}: $style; после $style: calc(#{$max-size} * #{$factor});, вы увидите вывод.