How to do SASS Grandparent Selectors
Jake Wilson
1604

Yeah it’s a problem I’ve solved in a number of ways — my favourite being using a $blockname variable in place of $c. The rarity with which you actually change the .blockname means that I’m not worried about rewrites that occur few and far between, and the #{$blockname}__element syntax makes immediate sense.

Another use that I enjoy accepts that most of these selectors are using for a :hover, :focus change, or when the parent toggles a — modifier (tabbed content or something similar). In these scenarios I’ve used something like:

.block {

&__element {

*:hover > &,

&:focus > & {

}

}

}

Sorry for the lack of markdown..!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.