I would like to report unexpected behavior regarding the result of an if() function called within an @each loop. The result of the if() function is expected to be unique on each iteration of the loop, but this is not the actual result while compiling with node-sass/libsass.

In the compiled results below please note the generated class names which are determined by the value of the $infix variable (ie, the value of $break-point-name) on each iteration of the loop. Compiling with libsass, all generated class names are .foo-sm, when they are expected to be named .foo-sm, .foo-md, .foo-lg respectively, as shown when compiled with ruby sass or dart sass.

I am new to the SASS language (computer programming in general) and was hoping if someone could please explain the cause of this behavior and if there might be an alternative way to approach this problem while using node-sass/libsass.

With much thanks and appreciation,

input.scss

$config: (
        phone: (
                break-point-width:0px,
                break-point-name: xs
        ),
        tablet: (
                break-point-width:600px,
                break-point-name: sm
        ),
        laptop: (
                break-point-width:900px,
                break-point-name: md
        ),
        desktop: (
                break-point-width:1200px,
                break-point-name:lg
        ),
);

@each $key, $map in $config {
  $break-point-width: map_get($map, break-point-width);
  $break-point-name: map_get($map, break-point-name);
  $infix: if($break-point-width == 0px, null, -$break-point-name);
      .foo#{$infix} {
        content: '#{$break-point-name}';
      }
 }

Actual results

http://libsass.ocbnet.ch/srcmap

libsass 3.5.4

.foo {
  content: "xs";
}

.foo-sm {
  content: "sm";
}

.foo-sm {
  content: "md";
}

.foo-sm {
  content: "lg";
}

Expected result

ruby sass 3.5.6

.foo {
  content: "xs";
}

.foo-sm {
  content: "sm";
}

.foo-md {
  content: "md";
}

.foo-lg {
  content: "lg";
}

dart sass 1.1.8

.foo {
  content: "xs";
}

.foo-sm {
  content: "sm";
}

.foo-md {
  content: "md";
}

.foo-lg {
  content: "lg";
}

version info:

$ node-sass --version
node-sass       4.12.0  (Wrapper)       [JavaScript]
libsass         3.5.4   (Sass Compiler) [C/C++]