CSS PREprocessors

Placeholder Selectors

by

Placeholder Selectors are like classes, that will not be outputted to the generated CSS, but are easy to reuse in your code. Besides, you can name them anything and no one will ever know!

Here is how to use them, note that placeholder-2 won't be visible in the final CSS because we haven't called it anywhere.

Less doesn't support actual Placeholder Selectors, but you can simulate one by using a mixin.

.placeholder-1() {
  foo: bar;
}

.placeholder-2() {
  baz: qux;
}

.include-placeholder-1 {
  .placeholder-1();
}
%placeholder-1 {
  foo: bar;
}

%placeholder-2 {
  baz: qux;
}

.include-placeholder-1 {
  @extend %placeholder-1;
}
%placeholder-1
  foo: bar

%placeholder-2
  baz: qux

.include-placeholder-1
  @extend %placeholder-1
$placeholder-1
  foo: bar

$placeholder-2
  baz: qux

.include-placeholder-1
  @extend $placeholder-1
%placeholder-1 {
  foo: bar;
}

%placeholder-2 {
  baz: qux;
}

.include-placeholder-1 {
  @extend %placeholder-1;
}
.include-placeholder-1 {
  foo: bar;
}

Because Sass and Stylus use @extend, they will produce more efficient CSS. If two selectors, let's call them .selector-1 and .selector-2, both extend the same placeholder, then the resulting CSS will have a selector that combines the common styles - .selector-1, .selector-2 {...}.

Interactive

Leave a comment below or suggest improvements on GitHub.