Mixin Arguments
Pass values into a mixin to make it flexible.
@mixin name($a, $b) { } @include name(1, 2);Mixins accept arguments so the same pattern can produce different output. Declare parameters in parentheses and reference them like variables inside the mixin.
Named and positional
You can pass arguments by position or by name. Named arguments make calls self-documenting and let you skip optional ones.
Arbitrary arguments
A parameter ending in ... collects any number of extra arguments into a list — handy for pass-through properties like box-shadow.
Example
@mixin box($padding, $color) {
padding: $padding;
background: $color;
}
.alert { @include box(12px, #CC6699); }
.note { @include box($color: #eee, $padding: 8px); }
// Arbitrary arguments
@mixin shadows($shadows...) {
box-shadow: $shadows;
}
.card { @include shadows(0 1px 2px #0002, 0 4px 8px #0001); }When to use it
- A responsive mixin accepts a breakpoint argument so a single mixin handles all screen sizes rather than one mixin per breakpoint.
- A button mixin takes a background color and text color as arguments to generate accessible color variants from a single definition.
- A shadow mixin accepts an elevation level (1-5) and computes the appropriate shadow parameters internally, keeping component styles simple.
More examples
Mixin with a single argument
A font-size mixin takes the desired size and automatically computes the proportional line-height from the same argument.
@mixin font-size($size) {
font-size: $size;
line-height: $size * 1.5;
}
h1 { @include font-size(2rem); }
h2 { @include font-size(1.5rem); }
p { @include font-size(1rem); }Button variant from two arguments
Two arguments — background and optional text color — generate a full button variant including hover state from one mixin call.
@mixin btn-color($bg, $text: white) {
background-color: $bg;
color: $text;
border: 2px solid $bg;
&:hover {
background-color: darken($bg, 8%);
border-color: darken($bg, 8%);
}
}
.btn-primary { @include btn-color(#2563eb); }
.btn-danger { @include btn-color(#dc2626); }Responsive breakpoint mixin
The mixin accepts a named breakpoint key, looks it up in a map, and wraps the @content block in the correct media query.
@use 'sass:map';
$breakpoints: (sm: 640px, md: 768px, lg: 1024px);
@mixin respond-to($bp) {
@media (min-width: map.get($breakpoints, $bp)) {
@content;
}
}
.sidebar {
width: 100%;
@include respond-to(md) { width: 260px; }
}
Discussion