Common Selector Variables
If your using SASS it can be really handy to have variables that give you access to common selectors like:
.module {
background-color: #ff0000;
&:hover, &:focus {
background-color: #ffffff;
}
.ie7 &, .ie8 & {
background-color: #000000;
}
}
We can simplify this by creating some variables to group the two states and both IE browser classes less than IE9.
$focus: '&:hover, &:focus";
$lte9: ".ie7 &, .ie8 &";
Now our code will look like this:
.module {
background-color: #ff0000;
#{$focus} {
background-color: #ffffff;
}
#{$lte9} {
background-color: #000000;
}
}
Reference
Inspired by Eric Meyers Susy SASS Variables http://susy.oddbird.net
Written by Stephen Way
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#