SASS @at-root with multiple parent selector

Question

I've got a slight issue and searching hasn't yielded any results as of yet. But it is something that keeps appearing.

I'm using SASS pre to work with the @at-root root so that I can do BEM CSS syntax.

I've got the following SCSS:

.cc_sidebar,.cc_popup{
    .btn{
        display: inline-block;
        cursor: pointer;
        @at-root{
            #{&}--icon{
                width: 25px;
            }
        }
    }
}

The expected output of the icon modifier class is:

.cc_sidebar .btn--icon,cc_popup .btn--icon{width: 25px;}

But instead I'm getting:

.cc_sidebar .btn, .cc_popup .btn--icon{width: 25px;}

The --icon isn't being applied to the first parent selector. Should it be? Or am I not understanding the full workings of the @at-root?

Any ideas or feedback would be greatly appreciated.

And yes, the whole thing does have to be wrapped with the two parent selectors.

Answer 1

This is surely a bug in the Sass, in the latest version (gem install sass --pre) your code expands to

.cc_sidebar .btn,
.cc_popup .btn {
  display: inline-block;
  cursor: pointer; }
  .cc_sidebar .btn, .cc_popup .btn--icon, .cc_sidebar .btn, .cc_popup .btn--icon {
    width: 25px; }

And you can see duplicated .cc_sidebar .btn, .cc_popup .btn--icon .cc_sidebar .btn, .cc_popup .btn--icon part, so it looks like a bug.

I actually tested it a bit and, yes, there are two bugs actually! I filled them up in the Sass issues: https://github.com/nex3/sass/issues/1003 and https://github.com/nex3/sass/issues/1004, so you could use your code when they would be fixed.

As the problem is with multiple selectors, the only workaround is not to use them :(