Sass Mixin Arguments

How it works

Parameters are inputs to a mixin. A default handles the common case without preventing a caller from choosing another value. Named arguments make a call easier to read when several settings have the same value type. Our helper accepts one length because that is the only choice its contract needs. Adding every possible CSS property as an argument would make the abstraction harder to maintain than ordinary declarations.

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 mixin-arguments.scss mixin-arguments.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

mixin-arguments.scss

Download mixin-arguments.scss — save at the shown relative path.

@mixin inset($space: 12px) {
  padding: $space;
}
.screening-card {
  @include inset;
}
.ticket {
  @include inset($space: 20px);
}

Expected CSS

.screening-card {
  padding: 12px;
}
.ticket {
  padding: 20px;
}

The omitted argument becomes 12px; the ticket deliberately opts into 20px. Changing the default later affects only callers that omit it. A keyword call documents intent without relying on a remembered parameter position.

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