SASS &body? does not work but &.class does

Question

For the following SASS when class-a also has class-b then the color applied is blue.

However when the body element has class-a I would expect the color to be red, but instead this results in an error.

.class-a {
    &.class-b {
        color: blue;
    }
    &body {
        color: red;
    }
}

Do you perhaps mean `&.class-b` which would result in `.class-b.class-b`? — Christoph, Aug 13 '13 at 14:58
Even if this worked in Sass, the selector would generate as `.class-abody` instead of the desired `body.class-a`. You would need to have it written as `body&` instead of `&body`. — cimmanon, Aug 13 '13 at 15:18
@cimmanon so is there a way of nesting a selector within .class-a that targets the body element when it also has the class of class-a? — Evanss, Aug 13 '13 at 15:20
Are you looking for a [parent selector](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector)? Or do you just want a `body.class-a` selector? — cimmanon, Aug 13 '13 at 15:24
This isn't how nesting works. If you want `body.class-a`, you need to reverse the current nesting. — meager, Aug 13 '13 at 15:25

score 1 · Accepted Answer · answered Aug 13 '13 at 15:45

This is currently not possible.

Currently, & is syntactically the same as an element selector, so it can't appear alongside one. I think this helps clarify where it can be used; for example, foo&bar would never be a valid selector (or would perhaps be equivalent to foo& bar or foo &bar).

There is discussion to change this behavior, but it may be a long ways off before this becomes a part of Sass.

In the mean time, all you can really do is this:

.class-a {
    &.class-b {
        color: blue;
    }
}

body.class-a {
    color: red;
}

SASS &body? does not work but &.class does

1 Answers1