@each directive examples fail with syntax error

[jessepollak]

If I try to run the following examples from the SASS documentation, I get a syntax error.

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

error: expected 'in' keyword in @each directive

Is this the correct place to open this issue or should I move it to libsass?

[jessepollak]

Looking into it, I assume this is because either my system doesn't have libsass compatible with SASS 3.3 or node-sass hasn't updated yet. I'm using node-sass 0.8.3 — is there a way I can update the libsass inside of it?

[10xLaCroixDrinker]

You can update the libsass submodule with the following:

$ git submodule init
$ git submodule update

See the instructions for rebuilding the binaries here

[jessepollak]

Any recommendation for if we use node-sass in a build process where dependencies get automatically installed? Should we just add a build step with that update?

[kennethormandy]

@jessepollak Libsass doesn’t actually have compatibility with Sass 3.2 yet, and is aiming for that before 3.3. Node-sass intentionally doesn’t update libsass as fast or often as it could, which I think is keeping it more stable.

Even if you did always update to the latest libsass, unfortunately there will be a lot of Sass 3.3 stuff that just won’t work (and might not fail very gracefully either).

[jessepollak]

Ah, didn't realize that — thanks for the heads up. Is there any place online where I can look at that compatibility comparison? I did a little digging, but couldn't find anywhere that explicitly said that (or gave examples).

[kennethormandy]

@jessepollak A chart has been one of those oft-discussed-never-implemented kind of things, but things are moving in the right direction. There’s plenty to read here in terms of high level stuff, but for specifics it’s a lot blurrier.

[adamyeats-zz]

@jessepollak Did you manage to solve this issue?

[jessepollak]

I don't think there's a solution for it — libsass just doesn't support the features. I'm currently deciding between switching to ruby sass or just not using the latest features.

[csi-lk]

Yeah, I (regrettably) had to go to ruby sass for the moment until @each is included.

I tried rebuilding the binaries as @jking90 suggested to no avail

[arian]

It seems libsass doesn't support multiple assignments yet. This can be fixed by changing your code, because it does implement @each.

$foo: (puma, black, default),
  (sea-slug, blue, pointer),
  (egret, white, move);

@each $val in $foo {
  $animal: nth($val, 1);
  $color: nth($val, 2);
  $cursor: nth($val, 3);

  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }

}

[nschonni]

Thanks for the workaround @arian! I'm going to close this as it needs to be addressed upstream in libsass.

[Grawl]

sass/libsass#394