Default parameter values in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a default parameter value in Sass?

A default parameter value is a value given to a function or mixin parameter that is used if no other value is provided when calling it.

beginner

How do you set a default parameter value in a Sass mixin?

You assign the value in the parameter list using a colon, like @mixin example($color: blue). If no color is passed, it uses blue.

beginner

What happens if you call a Sass function or mixin without providing a parameter that has a default value?

Sass uses the default value specified for that parameter automatically.

intermediate

Can default parameter values in Sass be expressions or variables?

Yes, default values can be variables or expressions, like $size: 10px * 2 or $color: $primary-color.

beginner

Why are default parameter values useful in Sass?

They let you write flexible mixins and functions that work with or without extra input, making your code easier to reuse and maintain.

How do you define a default parameter value in a Sass mixin?

A By calling the mixin with a value

B Using an equal sign, like <code>$color = red</code>

C Using a colon after the parameter name, like <code>$color: red</code>

D By setting the value inside the mixin body

In Sass, default parameter values are set with a colon, for example @mixin example($color: red).

What value does a Sass mixin use if you don't provide a parameter with a default value?

A It uses the default value specified

B It throws an error

C It uses null

D It uses the last value used

If no value is provided, Sass uses the default parameter value defined in the mixin or function.

Can default parameter values in Sass be variables?

A No, only fixed values are allowed

B Only numbers can be used

C Only colors can be used

D Yes, variables can be used as default values

Sass allows variables to be used as default parameter values, making code flexible.

Which of these is a correct Sass mixin with a default parameter?

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

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

C @mixin box-shadow($shadow) { box-shadow: $shadow; }

D @mixin box-shadow { box-shadow: 2px 2px 5px gray; }

Option B correctly sets a default parameter value using a colon.

Why use default parameter values in Sass?

A To allow mixins and functions to work with or without extra input

B To make mixins and functions less flexible

C To avoid writing any parameters

D To force users to always provide values

Default parameter values let your code work smoothly whether or not you provide extra input.

Explain how default parameter values work in Sass mixins and why they are helpful.

Think about how you can write mixins that don’t always need all inputs.

Describe a simple Sass mixin with a default parameter and what happens when you call it with and without that parameter.

Imagine a button color that changes if you give a color, or stays default if you don’t.

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