New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ampersand problem #746

ArnaudRinquin opened this Issue May 10, 2013 · 2 comments


None yet
3 participants
Copy link

ArnaudRinquin commented May 10, 2013

Hi !

According to the documentation, "In a selector, & will be replaced verbatim with the parent selector."

I have spotted an issue while trying to compile this:

.badge {
   border: 1px solid black;
   &-info {

Should compile to

.badge { border: 1px solid black; }
.badge-info { background: blue; }

Instead, we have this error:

Sass Error: Invalid CSS after "   &": expected "{", was "-info {"
"-info" may only be used at the beginning of a compound selector.

While I agree that this example is a misuse of the ampersand, it goes against the documentation.

Also, I stumbled upon this problem while trying to fix the .less to .scss converter form bootswatch-rails project. As Less allows this kind of ampersand use, some project use it. There is no way to build a correct converter for this example, which is really really sad.


This comment has been minimized.

Copy link

nex3 commented May 10, 2013

This is expected. In Sass, & is treated as the same sort of syntactic object as an element selector, since it cuold be replaced by one; as such &-info is invalid syntax. Your use case is coverred by #286, which is a high-priority feature.

@nex3 nex3 closed this May 10, 2013


This comment has been minimized.

Copy link

krulik commented May 27, 2014

I also have this problem with latest SASS (3.3.7).

However it does work here:
And here:

Any thoughts why?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment