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

0
votes

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;
    }
}
1
sass
Do you perhaps mean &.class-b which would result in .class-b.class-b? – Christoph
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
@Christoph yes sorry, have updated my question. – Evanss
@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
Are you looking for a parent selector? Or do you just want a body.class-a selector? – cimmanon

1 Answers

1
votes

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;
}