SASS Variables for Selectors

I’ve been getting friendly with SASS as Crowd Favorite has standardized on that for our CSS pre-processing. Today I was excited to learn1 I can use variables for selectors (and for property names, etc.) as well as for property values (the common usage).


// Vars – note the quotes around comma separated selectors
$a-tags: 'a, a:active, a:hover, a:visited';
$a-tags-hover: 'a:active, a:hover';
// Usage
#{$a-tags} {
color: red;
font-size: 1em;
text-decoration: none;
}
#{$a-tags-hover} {
color: blue;
}

view raw

sass-selectors.scss

hosted with ❤ by GitHub

I’m going to really like this for A tags, etc.

  1. Thanks Rona! ↩