CODEWITHSUNDEEP
sasscharacter
Diego
Diego

Reputation: 79

Special characters in selector scss?

How can I print to css a selector compile from scss like this:

SCSS 

_::-webkit-full-page-media, _:future, :root {
    .class_name {
        property: value;
    }
    .multi_class_another {}
}

CSS

_::-webkit-full-page-media, _:future, :root .class_name {
    property: value;
}

It always shows:

CSS

_::-webkit-full-page-media .class_name,_:future .class_name,:root .class_name {
    property: value;
}

Upvotes: 0

Views: 335

Answers (1)

LWilson
LWilson

Reputation: 444

In SCSS, when you nest a class within a group of comma separated selectors, the nested class gets applied to all of the selectors. Also, empty classes will be removed.

So, if 

_::-webkit-full-page-media, _:future, :root .class_name {
    property: value;
}

is what you want the CSS to look like, then, there is no more efficient way to write this is SCSS. If you wanted to make it super clean (and not have that :root .class_name nesting on the last selector) then you could look to use Sass's placeholder selectors. More info here http://thesassway.com/intermediate/understanding-placeholder-selectors

Upvotes: 1

Related Questions