&-- selector doesn't compile

[akurfuerst]

When I write BEM-Syntax I usually use .class__element and .class--modifier. For Example:

<!-- navigation element with modifier header -->
<nav class="navigation navigation--header">
    <a href="#" class="navigation__link>...</a>
    <a href="#" class="navigation__link>...</a>
</nav>

<!-- navigation element with modifier footer -->
<nav class="navigation navigation--footer">
    <a href="" class="navigation__link>...</a>
    <a href="" class="navigation__link>...</a>
</nav>

So, now I have a possibility to change styles for header and footer individiual. The SCSS-Code would look like this:

.navigation {
    // navigation styles...
    position: relative;
    border: 1px solid red;

    // all elements in Navigation e.g. navigatin__item
    &__{
        &item {
            // styles
            background-color: red;
        }
    }

    // modifications of the navigation e.g. navigation--header
    &--{
        &header {
            // styles
            border-color: blue;
        }

        &footer {
            // styles
            border-color: green
        }
    }

}

The output would be:

.navigation {
  position: relative;
  border: 1px solid red; 
}

.navigation__item {
    background-color: red; 
}

.navigation--header {
    border-color: blue; 
}

.navigation--footer {
    border-color: green; 
}

The Problem is, that he can't compile the &-- selector. The &__ is working. I get this error:

{ [Error: Invalid CSS after " }": expected "}", was "&--{"]
formatted: 'Error: Invalid CSS after " }": expected "}", was "&--{"\n on line xx of scss/general.scss\n>> }\n -----^\n',
message: 'Invalid CSS after " }": expected "}", was "&--{"',

It also works with &--footer and &--header, but not with &--{...}

Is there a workaround available? I thought in an older version of node sass it's working.

OS: OSX 10.11.2

[xzyfer]

Whoa. I wouldn't have believed this was valid Sass if I hadn't seen it compile with my own two eyes.

This is not currently supported in LibSass. There is no work around other than cleaning up your selectors.

// modifications of the navigation e.g. navigation--header
&--header {
  // styles
  border-color: blue;
}

&--footer {
  // styles
  border-color: green
}

[xzyfer]

I've opened an issue with LibSass. Subscribe to sass/libsass#1825 for updates.