Use a Sass Variable for a Selector

Say you need to use a certain selector in multiple places in your code. It's not tremendously common, to be sure, but stuff happens. Repeated code is typically an opportunity for abstraction. Abstracting values in Sass is easy, but selectors is slightly trickier.

One way to do it is to create your selector as a variable. Here's an example that is a comma separated list of selectors:

$selectors: "
  .module,
  body.alternate .module
";

Then to use that, you have to interpolate the variable, like this:

#{$selectors} {
  background: red;
}

That works with nesting too:

.nested {
  #{$selectors} {
    background: red;
  }
}

Prefixing

A variable can also be only a part of a selector, like a prefix.

$prefix: css-tricks-;

.#{$prefix}button {
  padding: 0.5rem;
}

You could use nesting to do prefixing as well:

.#{$prefix} {
  &module {
    padding: 1rem;
  } 
  &header {
    font-size: 110%;
  }
  &footer {
    font-size: 90%;
  }
}

Selectors in a Map

Perhaps your abstraction lends itself to a key/value pair situation. That's a map in Sass.

$selectorMap: (
  selectorsFoo: ".module",
  selectorsBar: ".moodule-2"
);

You can use them individually like:

#{map-get($selectorMap, selectorsFoo)} {
  padding: 1rem;
}

Or loop through them:

@each $selectorName, $actualSelector in $selectorMap {
  #{$actualSelector} {
    padding: 1rem;
  }
}

Examples

See the Pen Sass Variables for Selectors by Chris Coyier (@chriscoyier) on CodePen.

Comments

  1. User Avatar
    Ramon
    Permalink to comment#

    You can also prefix like this:

    • User Avatar
      ergregwefwwefwe
      Permalink to comment#

      Nice. You can use & to reference a parent and $x to assign something as a variable.

    • User Avatar
      Caio
      Permalink to comment#

      This is quite useful when working with BEM.

    • User Avatar
      Brad
      Permalink to comment#

      I like that prefixing method, but I do it like this

      .prefix {
      &–stuff
      }
      That way if I have a class like .prefix-method, it will come out .prefix-method–stuff

  2. User Avatar
    Jakob E
    Permalink to comment#

    A little function and mixin to add some flexibility

    See the Pen SCSS selector mixin by jakob-e (@jakob-e) on CodePen.

  3. User Avatar
    Jakob E
    Permalink to comment#

    A little function and mixin to add some flexibility

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag