Mixins with parameters in SASS

Introduction

Mixins with parameters let you reuse styles but change details each time. This saves time and keeps your code neat.

You want to create buttons with different colors but the same shape.

You need to apply a shadow effect with different sizes on various elements.

You want to set different font sizes but keep the same font style.

You want to reuse a layout style but change spacing for different sections.

Syntax

SASS

@mixin name($param1, $param2) {
  property: $param1;
  property: $param2;
}

.selector {
  @include name(value1, value2);
}

Use @mixin to define reusable style blocks with parameters.

Use @include to apply the mixin and pass values.

Examples

This mixin sets background color for buttons. You pass the color when including it.

SASS

@mixin button($bg-color) {
  background-color: $bg-color;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
}

.btn-primary {
  @include button(blue);
}

.btn-danger {
  @include button(red);
}

This mixin creates a shadow with parameters for position, blur, and color.

SASS

@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
}

.card {
  @include box-shadow(0.5rem, 0.5rem, 1rem, rgba(0,0,0,0.3));
}

Sample Program

This example shows a mixin that sets text color and size. We use it for a title and a subtitle with different colors and sizes.

SASS

@charset "UTF-8";

@mixin colored-text($color, $size) {
  color: $color;
  font-size: $size;
  font-weight: bold;
}

.title {
  @include colored-text(#2a9d8f, 2rem);
}

.subtitle {
  @include colored-text(#e76f51, 1.5rem);
}

Important Notes

Parameters make mixins flexible and powerful.

You can set default values for parameters like $color: black to make them optional.

Mixins help avoid repeating the same code with small changes.

Summary

Mixins with parameters let you reuse styles but customize them.

Use @mixin to create and @include to apply with values.

This keeps your styles clean, consistent, and easy to update.