Last Updated: February 25, 2016
·
810
· pixelclear

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