@at-root with nested ampersand '&' selector compiles differently for Sass Compiler vs Libsass

[classicmike]

Hi,

Currently in my SCSS workflow, I use BEM. I have some SASS code SCSS content which would wrap an @at-root directive and compile out; as well as the '&' selector to concatenate parent selectors, like this:

@at-root .block {
  &__element {
    &--modifier {
      background: #fff;
    }
    &--modifier#{&}--another-modifier {
      background: #fff;
    }
  }
}

In order to compile out something like this:

/** EXPECTED CORRECT OUTPUT **/
.block__element--modifier {
  background: #fff;
}
.block__element--modifier.block__element--another-modifier {
  background: #fff;
}

At the time I was using nodesass which from my understanding uses libsass. However, what I found
was with the @at-root at the top level, the final compiled CSS was compiled differently as:

/*** Incorrect Ouptut under NodeSass ***/
.block__element--modifier {
  background: #fff;
}

.block .block__element--modifier.block .block__element--another-modifier {
  background: #fff;
}

Upon further testing, if I removed the @at-root I would get the correct expected output.

To make sure I can verify this potential issue, I fired up Sassmeister to test a few things and found out the very same SCSS compiled differently when using the Sass Compiler with Compass (As per above correct expected output correctly compiling .block__element--modifier.block__element--another-modifier ) vs Libsass (As per above incorrect output under NodeSass incorrect compiling .block .block__element--modifier.block .block__element--another-modifier).

Below is a list of links with the Gists for the full tests on both compilers with the SCSS code I used and the compile results for each. Version information should be present in both.

• My test code and results compiled in SASS compiler. v3.4.21.
• My test code and results compiled in Libsass. v3.5.0.beta.2.

If my understanding of the way how you use '&' and 'at-root' is correct as in the examples, the Libsass implementation seems to be doing it incorrectly. Whilst I have tested it on specific a specific version of each compiler, I feel the problem can be also be seen in the latest stable version of Libsass.

If you can look into this that would be great as my project at the moment sort of depends on it.

Thanks.

[classicmike]

Hi guys,

I submitted this issue about a month ago and I was just wanted to follow up on whether or not this has been looked at or not. I have just edited the issue content just to make it a little more readable with the example code.

Thanks for your help.

[xzyfer]

Thanks for the report @classicmike. I'm on holidays atm so this hasn't been looked into, however I can confirm the issue with a reduced test case.

@at-root .block {
  &__element {
    &--modifier#{&}--another-modifier {
      background: #fff;
    }
  }
}