Default parameter values in SASS - Browser Rendering Trace

Render Flow - Default parameter values

[Read @mixin with parameters] -> [Check if argument passed] -> [If no argument, use default value] -> [Compile mixin body with parameters] -> [Output CSS]

When a mixin is called, the Sass compiler checks if arguments are provided. If not, it uses the default values defined for parameters, then compiles the CSS accordingly.

Render Steps - 3 Steps

Code Added:@mixin box-shadow($shadow: 2px 2px 5px gray) { box-shadow: $shadow; }

Before

[No CSS for box-shadow]

→

After

[Mixin box-shadow defined with default shadow: 2px 2px 5px gray]

The mixin is defined with a default parameter value for the shadow property.

🔧 Browser Action:Sass compiler stores mixin with default parameter

Code Sample

This Sass code defines a mixin with a default parameter value for box-shadow. The .box class uses the default shadow, while .box-custom uses a custom shadow.

SASS

@mixin box-shadow($shadow: 2px 2px 5px gray) {
  box-shadow: $shadow;
}

.box {
  @include box-shadow;
}

.box-custom {
  @include box-shadow(5px 5px 10px black);
}

Render Quiz - 3 Questions

After step 2, what box-shadow does the .box class have?

A 2px 2px 5px gray

B 5px 5px 10px black

C No box-shadow

D Default browser shadow

Common Confusions - 2 Topics

Why does my mixin always use the default value even when I pass an argument?

Make sure you pass the argument correctly when including the mixin. If the argument is missing or misspelled, Sass uses the default value.

💡 Passing an argument overrides the default; missing argument uses default.

Can I have multiple parameters with default values?

Yes, you can define multiple parameters with defaults. If you omit some arguments, Sass uses defaults for those omitted.

💡 Defaults fill in only missing arguments, others use passed values.

Property Reference

Parameter	Default Value	Used When	Effect
$shadow	2px 2px 5px gray	No argument passed	Applies default box-shadow style
$shadow	Custom value	Argument passed	Applies custom box-shadow style

Concept Snapshot

Sass mixins can have default parameter values. If no argument is passed, the default is used. Passing an argument overrides the default. Defaults provide flexibility and reduce repetition. Use @mixin with ($param: default) syntax.