Placeholder Selectors

Introduced with Sass 3.2 placeholder selectors enable us to write better modular CSS by extending classes, which won’t be included in the compiled file. The main advantage of using placeholder selectors is the reduction of classes in your HTML and CSS.

#Plain CSS

Let’s assume we want to implement a website, which has tiles with different colors. Each tile has the same width, height and margin.

.tile {
  width: 200px;
  height: 200px;
  margin-right: 20px;
}

For the ability to add different colors to the tiles we included two theme classes in our CSS.

.tile-blue {
  background-color: blue;
}
.tile-red {
  background-color: red;
}

The corresponding markup could look like this:

<div class="tile tile-blue"></div>
<div class="tile tile-red"></div>

#Without Placeholder Selectors

We’ve added two classes to the tile element: one for basic tile styles and one for the color. To reduce the number of classes we could simply extend .tile and remove it from our HTML.

.tile {
  width: 200px;
  height: 200px;
  margin-right: 20px;
}
.tile-blue {
  @extend .tile;
  background-color: blue;
}
.tile-red {
  @extend .tile;
  background-color: red;
}

Although we wouldn’t have to use the .tile class in our markup anymore, it would still be in our compiled CSS:

.tile,
.tile-blue,
.tile-red {
  width: 200px;
  height: 200px;
  margin-right: 20px;
}

To save some bytes or to prevent other developers from using the basic tile class without a color, we could also remove it from the compiled CSS.

#Using Placeholder Selectors

Changing the dot before a class to a percent sign tells Sass to use it as a placeholder class.

%tile {
  width: 200px;
  height: 200px;
  margin-right: 20px;
}
.tile-blue {
  @extend %tile;
  background-color: blue;
}
.tile-red {
  @extend %tile;
  background-color: red;
}

Now we just need to use our theme classes.

<div class="tile-red"></div>
<div class="tile-blue"></div>

And our compiled CSS doesn’t contain the basic tile class anymore.

.tile-blue,
.tile-red {
  width: 200px;
  height: 200px;
  margin-right: 20px;
}
.tile-blue {
  background-color: blue;
}
.tile-red {
  background-color: red;
}

To sum up placeholder classes are not included in your compiled CSS so that you can prevent developers from using those classes in their HTML. It is also possible to build a framework solely out of placeholder classes, which will only be added to the compiled CSS if developers extend them.

#Further Reading

Sass Reference: Placeholder Selectors