struggling with sass each output is empty

Question

I'm about to try something pretty similar to this: https://stackoverflow.com/a/8380156/2309928

I've got this scss code:

$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});
    }
  }
}

expected output should look something like this:

.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

but there is no output at all and I'm out of ideas why this is happening..

theres no error or anything

Try it out on Sassmeister

score 3 · Accepted Answer · answered Sep 19 '18 at 12:04

3

You do not actually apply any styles and empty styles are simply removed. If you add for instance #{$widthOrHeight}: $style; after $style: calc(#{$max-size} * #{$factor}); you will see an output.

answered Sep 19 '18 at 12:04

Jan Wendland

1,350
9
17

score 0 · Answer 2 · answered Sep 19 '18 at 12:13

updated Sassmeister:

fault was at line 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});

    }
  }
}

struggling with sass each output is empty

2 Answers2