Skip to content

Instantly share code, notes, and snippets.

@antonkor
Last active September 17, 2016 22:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save antonkor/c82d4675ef4d4ebc56362547dc23cb1d to your computer and use it in GitHub Desktop.
Save antonkor/c82d4675ef4d4ebc56362547dc23cb1d to your computer and use it in GitHub Desktop.
Using SASS to write a compound selector to the parent within a child
// ----
// Sass (v3.4.21)
// ----
.parent {
content: 'set parent style';
color: red;
.child {
content: 'set child style';
&.child-compound{
content: 'override child style with compound selector';
}
.grandparent & {
content: 'override child style with grandparent specificity';
}
#{&} {
content: 'see a pattern here?';
}
@at-root.compound-parent#{&} {
content: 'YES! Finally a way to compound the parent!';
color: blue;
}
}
}
.current-selector {
#{&} {
content: '#{interpolation brackets} is the key to compound selector the parent!';
content: 'oh and @at-root is nice too.';
}
}
@antonkor
Copy link
Author

I've always wondered how write a compound selector to the parent that affects your current selector.

checkout it out in action if you dont get it. http://www.sassmeister.com/gist/c82d4675ef4d4ebc56362547dc23cb1d

i'd love to see if this is possible any other way.

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