Created
March 8, 2013 16:46
-
-
Save johnlindquist/5117860 to your computer and use it in GitHub Desktop.
This file contains hidden or 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
.container input:checked + label, | |
.container input:checked + label:hover{ | |
} |
You can reference the parent selector using the ampersand:
.container input:checked + label {
&:hover{
}
}
Is something like this possible without having to write out "&:checked + label" twice?
.container
input
&:checked + label, &:checked + label:hover
I haven't tried it, but something like the following SHOULD work:
$labelForCheckBox: ".container input:checked + label";
#{$labelForCheckBox}, #{$labelForCheckBox}:hover {
//Insert styles here
}
Alternatively you can do:
#{$labelForCheckBox} {
//// styles
&:hover { @extend #{$labelForCheckBox} } //might be able to get away with << &:hover { @extend & } >>
}
EDIT: BLEH, I can't get it to style correctly in this markup... but hopefully you get the gist.. (see what i did there?)
You could do this:
.container {
input {
&:checked + label {
color: red;
&:hover {
color: red;
}
}
}
}
But that introduces some unnecessary repetition. Honestly, I might be inclined to keep your original example as-is, depending on the context.
Ah. Here we go:
.container {
input {
&:checked {
& + label,
& + label:hover {
color: red;
}
}
}
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'd go with this: