Sass Mixins

How it works

A mixin inserts declarations where it is included. This is useful when a repeated visual rule has one clear purpose. Here the card and ticket both need consistent corners and space, while their selectors stay independent. Unlike a placeholder extension, including the mixin repeats its declarations in the generated CSS. Inspect that cost before using a large mixin across many variants.

Run the code

Use Dart Sass 1.107.0 in a separate learning folder. Install Node.js, then run npm install --save-dev --save-exact sass@1.107.0. Save every file below with its shown path. Run npx sass mixins.scss mixins.css --no-source-map from that folder. Browsers receive compiled CSS, not Sass.

The existing Sass playground uses legacy LibSass 3.6.2 and cannot run modern modules. The compiled CSS preview uses the isolated HTML/CSS editor; it does not compile Sass online. Preloading does not execute the preview. Apache, MySQL and PHP are not required.

Example

mixins.scss

Download mixins.scss — save at the shown relative path.

@mixin panel {
  padding: 16px;
  border-radius: 8px;
}
.screening-card {
  @include panel;
}
.ticket {
  @include panel;
}

Expected CSS

.screening-card {
  padding: 16px;
  border-radius: 8px;
}
.ticket {
  padding: 16px;
  border-radius: 8px;
}

The include is a build-time instruction. The browser receives two normal rules and does not know that a mixin was involved. Keep component-specific colours beside the component rather than hiding unrelated decisions in panel.

Preview compiled CSS — choose Run code. Change and compile Sass locally first.