Appending the parent selector to the end generates the incorrect result with Elixir/Libsass

Question

I have the following SCSS:

.btn {
    color: #000;
    @at-root {
        a#{&} {
            display: inline-block;
        }
    }
}

I'm expecting the following CSS:

.btn { color: #000; }
a.btn { display: inline-block; }

But when I compile it using gulp-sass, I get this instead:

.btn { color: #000; }
.btn a.btn { display: inline-block; }

Answer 1

This appears to be a bug with Libsass, which is what gulp-sass compiles with. If you want to get the correct results, you'll need to switch to using the Ruby compiler for Sass.