Skip to content

Instantly share code, notes, and snippets.

@daneden
Last active August 29, 2015 14:11
Show Gist options
  • Save daneden/76d7e95ff40e35c8e913 to your computer and use it in GitHub Desktop.
Save daneden/76d7e95ff40e35c8e913 to your computer and use it in GitHub Desktop.
.block {
&:hover {
&__element {
color: red;
}
}
}
/* Expected/desired output: */
.block:hover .block__element {
color: red;
}
/* Actual output: */
.block:hover__element {
color: red;
}
/* This is not a thing :( */
/* Shitty workaround: */
.block {
$n: #{&};
&:hover {
#{$n}__element {
color: red;
}
}
}
/* This works: */
.block {
&:hover &__element {
color: red;
}
}
/* But, sadly, still means relatively more labor if I want to style more than one thing in the pseudo-class/state: */
.block {
&:hover &__element {
color: red;
}
&:hover &__bar {
color: blue;
}
&:hover &__foo {
color: green;
}
}
/* VS: */
.block {
&:hover {
&__element {
color: red;
}
&_bar {
color: blue;
}
&__foo {
color: green;
}
}
}
@daneden
Copy link
Author

daneden commented Dec 11, 2014

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