Contextual Styling With CSS Nesting

I've been hooked on CSS nesting for awhile. Like Sass, I've always written it with the & selector at the front, like this. .button { background: slategrey; &:hover { background: darkslategrey; } } Turns out, the & doesn't have to come first. Put it after another selector and the relationship flips. Instead of styling what's inside the element, you're styling the element based on what surrounds it.…