Advanced Sass Techniques: Mixins, %placeholder Selectors, and ES6‑like Features

Tools are the foundation of craftsmanship; for front‑end developers, Sass is a powerful tool that can greatly improve productivity when used correctly. This article skips basic installation and syntax and dives into deeper topics for experienced Sass users.

1. About @mixin

Good: A mixin that accepts parameters can generate reusable styles. For example, the following mixin creates a colored dot of a given diameter:

@mixin dot($color, $diameter) {
  display: inline-block;
  width: $diameter;
  height: $diameter;
  border-radius: 50%;
  background: $color;
}

It can be used with @include dot(red, 10px) wherever needed.

Bad: Some mixins cannot be merged, leading to duplicated CSS. For instance, a simple border‑radius mixin:

@mixin border-radius {
  border-radius: 3px;
}

When applied to multiple selectors, the compiled CSS repeats the same block instead of merging it.

Example usage:

.box { @include border-radius; margin-bottom: 5px; }
.btn { @include border-radius; }

Compiled result shows separate blocks for .box and .btn , illustrating the limitation.

To merge identical blocks, Sass provides the %placeholder syntax, which will be discussed next.

2. %placeholder

Good: Placeholders can be extended and merged by the compiler. Defining a placeholder:

%mt5 { margin-top: 5px; }
%pt5 { padding-top: 5px; }

Using @extend to include them:

.btn { @extend %mt5; @extend %pt5; }
.block { @extend %mt5; span { @extend %pt5; } }

The compiled CSS merges the shared rules:

.btn, .block { margin-top: 5px; }
.btn, .block span { padding-top: 5px; }

Bad: Placeholders cannot accept parameters, so they are less flexible than mixins. When a parameterized version is needed, a mixin should be used instead.

3. .className vs %placeholder

Extending a real class with @extend .className copies all its declarations into the selector, which can cause unintended selector bloat when the class appears in many contexts. For example, extending .button results in a long combined selector list that includes every place .button is used.

Using a placeholder avoids this problem because only the placeholder’s rules are merged, not the original class’s selector chain.

4. ES6‑like Features in Sass

1. {} Interpolation

Interpolation works like ES6 template strings, allowing variables to be inserted into selectors or property names. Example:

$attr: background;
#{$attr}-color: blue; // becomes background-color: blue;

It also enables dynamic construction of complex values, such as font shorthand:

$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height} sans-serif;

2. Property Iteration with @each

Sass can iterate over maps similarly to JavaScript’s for…of . This is useful for generating icon classes from a single map:

$iconMap: (
  unfinish: '\e0c2',
  consult: '\f162',
  filter: '\f45a'
);
@each $iconName, $content in $iconMap {
  .i-ico-#{$iconName}::before { content: $content; }
}

The compiled CSS creates separate rules for each icon.

Summary

Sass offers many powerful features that mirror ES6 syntax, such as rest parameters in mixins, interpolation, and map iteration. Understanding when to use @mixin , @extend , and %placeholder helps developers write cleaner, more maintainable stylesheets.