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.

Practice

1. What is the main purpose of default parameter values in Sass mixins or functions?

easy

A. To force users to always pass arguments

B. To make the code run faster

C. To provide fallback values if no argument is given

D. To create new CSS properties automatically

Solution

1. Step 1: Understand default parameters

   Default parameters give a value when no argument is passed to a mixin or function.

2. Step 2: Identify the purpose

   This helps avoid errors and makes code flexible by using fallback values.

3. Final Answer:

   To provide fallback values if no argument is given -> Option C

4. Quick Check:

   Default parameters = fallback values [OK]

Hint: Defaults fill in missing arguments automatically [OK]

Common Mistakes:

• Thinking defaults speed up code
• Believing defaults force argument passing
• Confusing defaults with CSS property creation

2. Which of the following is the correct syntax to set a default parameter value in a Sass mixin?

easy

A. @mixin example($color = blue) { color: $color; }

B. @mixin example($color: blue) { color: $color; }

C. @mixin example($color ? blue) { color: $color; }

D. @mixin example($color <- blue) { color: $color; }

Solution

1. Step 1: Recall Sass default parameter syntax

   In Sass, default values use a colon ':' after the parameter name.

2. Step 2: Match syntax to options

   @mixin example($color: blue) { color: $color; } uses '$color: blue' which is correct syntax for default values.

3. Final Answer:

   @mixin example($color: blue) { color: $color; } -> Option B

4. Quick Check:

   Default value syntax uses ':' not '=' [OK]

Hint: Use colon ':' to assign default values in parameters [OK]

Common Mistakes:

• Using '=' instead of ':' for defaults
• Using '?' or '<-' which are invalid
• Confusing default syntax with other languages

3. Given the Sass mixin:

@mixin box($width: 100px, $height: 50px) { width: $width; height: $height; }

What CSS is generated by:

.small { @include box($height: 30px); }

medium

A. .small { width: 100px; height: 30px; }

B. .small { width: 30px; height: 30px; }

C. .small { width: 100px; height: 50px; }

D. .small { width: 30px; height: 50px; }

Solution

1. Step 1: Identify passed and default parameters

   The mixin call passes only $height: 30px, so $width uses default 100px.

2. Step 2: Write resulting CSS

   Width is 100px (default), height is 30px (passed value).

3. Final Answer:

   .small { width: 100px; height: 30px; } -> Option A

4. Quick Check:

   Passed overrides height, width uses default [OK]

Hint: Passed args override defaults, others stay default [OK]

Common Mistakes:

• Assuming all defaults are overridden
• Mixing up which parameter was passed
• Forgetting default applies if argument missing

4. What is wrong with this Sass mixin?

@mixin card($bg-color blue) { background-color: $bg-color; }

medium

A. Missing colon ':' between parameter and default value

B. Using '=' instead of ':' for default value

C. Parameter name cannot start with '$'

D. Mixin name cannot be 'card'

Solution

1. Step 1: Check parameter default syntax

   The parameter $bg-color is followed by 'blue' without a colon ':' separator.

2. Step 2: Identify correct syntax

   Default values require a colon ':' like '$bg-color: blue'.

3. Final Answer:

   Missing colon ':' between parameter and default value -> Option A

4. Quick Check:

   Default parameter syntax needs ':' [OK]

Hint: Default values need ':' after parameter name [OK]

Common Mistakes:

• Omitting colon ':' between parameter and value
• Using '=' instead of ':'
• Thinking parameter names can't start with '$'

5. You want a Sass function that returns a color, defaulting to red if no argument is given. Which function correctly uses default parameter values and returns the color?

hard

A. @function get-color($color = red) { @return $color; }

B. @function get-color($color: red) { return $color; }

C. @function get-color($color) { @return $color or red; }

D. @function get-color($color: red) { @return $color; }

Solution

1. Step 1: Check default parameter syntax in functions

   Default values use colon ':' like '$color: red'.

2. Step 2: Verify return statement syntax

   Sass uses '@return' to return values, not 'return'.

3. Step 3: Compare options

   @function get-color($color: red) { @return $color; } uses correct default and '@return'. @function get-color($color: red) { return $color; } uses 'return' which is invalid in Sass.

4. Final Answer:

   @function get-color($color: red) { @return $color; } -> Option D

5. Quick Check:

   Default param ':' and '@return' needed [OK]

Hint: Use ':' for defaults and '@return' to output value [OK]

Common Mistakes:

• Using '=' instead of ':' for defaults
• Using 'return' instead of '@return'
• Trying to use 'or' inside return statement