Default parameter values in SASS

Introduction

Default parameter values let you set a fallback value for a function or mixin parameter. This means if you don't give a value, it uses the default.

When you want a mixin to work with or without a specific value.

When you want to avoid repeating the same value every time you call a function.

When you want to make your code flexible and easier to maintain.

When you want to provide a common style but allow customization.

When you want to prevent errors if a parameter is missing.

Syntax

SASS

@mixin name($param: default-value) {
  // styles
}

// or for functions
@function name($param: default-value) {
  @return something;
}

Use a colon : to assign the default value after the parameter name.

You can use any valid Sass value as a default, like colors, numbers, strings, or lists.

Examples

This mixin sets a default button color to blue if no color is given.

SASS

@mixin button($color: blue) {
  background-color: $color;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

This mixin creates a square box with a default size of 100px.

SASS

@mixin box($size: 100px) {
  width: $size;
  height: $size;
  background: gray;
}

This function doubles a number, defaulting to 2 if no number is passed.

SASS

@function double($number: 2) {
  @return $number * 2;
}

Sample Program

This example shows a card mixin with two default parameters: background color and padding. The .card-default uses the default values. The .card-custom overrides both defaults.

SASS

@mixin card($bg-color: #f0f0f0, $padding: 1rem) {
  background-color: $bg-color;
  padding: $padding;
  border-radius: 0.5rem;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.card-default {
  @include card();
}

.card-custom {
  @include card(#cce5ff, 2rem);
}

Important Notes

Default values make your mixins and functions easier to reuse.

You can override defaults by passing your own values when calling the mixin or function.

Always choose sensible defaults that fit most cases to save time.

Summary

Default parameter values provide fallback values for mixins and functions.

They help avoid repeating common values and make code flexible.

You can override defaults by passing new values when using the mixin or function.