Last active
September 17, 2016 22:48
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// 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.'; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.