Skip to content
This repository has been archived by the owner on Jul 24, 2024. It is now read-only.

Problem when compiling sass with flow control: @for and @each with @if and @else #2927

Open
TheStarRocker opened this issue May 20, 2020 · 0 comments

Comments

@TheStarRocker
Copy link

First of all forgive my bad English.

I made a @mixin in sass, the problem here is that when I call the @include with the parameters that the mixin receives it should return me 1 single value, but this is not the case for node-sass that when compiling it returns me 12 results. I have tried the same case in dart-sass, sassMesiter and Sass.js, these last two are online compilers; and in all 3 it has given me the expected result of the @mixin.

Tested with:
Windows 10 x64 bit - 1909
NodeJS x64 bits: v12.16.3 LTS and v14.3.0
npm: v6.14.4 - v6.14.5
node-sass: v4.14.1 - libsass v3.5.5
sass (dart-sass): v1.26.5 compiled with dart2js 2.7.2

Parameters used for node-sass:
--output-style=expanded

Parameters used for sass (dart-sass):
--style=expanded

Using @each

$grid-columns: 12;

@mixin height(
  $type: custom,
  $height: auto,
  $maxHeight: none,
  $minHeight: auto
) {
  $columns: $grid-columns;
  $typeOfType: type-of($type);

  @if $typeOfType == string {
    @if $type == custom {
      height: $height;
      max-height: $maxHeight;
      min-height: $minHeight;
    } @else if $type == h {
      height: $height;
    } @else if $type == maxh {
      max-height: $maxHeight;
    } @else if $type == minh {
      min-height: $minHeight;
    }

    $sizes: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12;

    @each $size in $sizes {
      @if $type == h-#{$size} {
        height: percentage($size / $columns);
      }
    }
  }
}

div{
  @include height(h-5);
}

Using @for

$grid-columns: 12;

@mixin height(
  $type: custom,
  $height: auto,
  $maxHeight: none,
  $minHeight: auto
) {
  $columns: $grid-columns;
  $typeOfType: type-of($type);

  @if $typeOfType == string {
    @if $type == custom {
      height: $height;
      max-height: $maxHeight;
      min-height: $minHeight;
    } @else if $type == h {
      height: $height;
    } @else if $type == maxh {
      max-height: $maxHeight;
    } @else if $type == minh {
      min-height: $minHeight;
    }

    @for $i from 1 through 12 {
      @if ($type == h-#{$i}) {
        height: percentage($i / $columns);
      }
    }
  }
}

div{
  @include height(h-5);
}

Expected result and returns sass (dart-sass) and SassMeister, Sass.js

div {
  height: 41.6666666667%;
}

Which gives me back node-sass

div {
  height: 8.33333%;
  height: 16.66667%;
  height: 25%;
  height: 33.33333%;
  height: 41.66667%;
  height: 50%;
  height: 58.33333%;
  height: 66.66667%;
  height: 75%;
  height: 83.33333%;
  height: 91.66667%;
  height: 100%;
}
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants