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