Default values with !default in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the !default flag do in Sass?

It sets a variable only if it has not been set before. This means the variable keeps its value unless it is undefined, then the !default value is used.

beginner

How do you write a Sass variable with a default value of blue?

$color: blue !default;

This means $color will be blue unless it was already set to something else.

intermediate

Why use !default in Sass variables?

It helps avoid overwriting variables when importing files. You can set a default style but allow users to customize by setting the variable before importing.

beginner

What happens if you set a variable without !default after it was already set?

The new value will overwrite the old one, no matter what. !default prevents overwriting if the variable exists.

beginner

Can !default be used with any Sass variable type?

Yes, it works with colors, numbers, strings, lists, maps, or any value type in Sass.

What does $font-size: 16px !default; do if $font-size is already set to 14px?

A Removes $font-size variable

B Sets $font-size to 16px anyway

C Throws an error

D Keeps $font-size as 14px

The !default flag only sets the variable if it is not already set. Since $font-size is 14px, it stays 14px.

Why is !default useful when creating reusable Sass libraries?

A It forces users to change variables

B It allows users to override variables before import

C It prevents variables from being set

D It deletes unused variables

Using !default lets users set variables before importing the library, so the library uses those values instead of defaults.

Which of these is a correct way to set a default variable in Sass?

A $color: red !default;

B $color: red default;

C $color = red !default;

D $color !default: red;

The correct syntax is $variable: value !default; with a colon and the !default flag after the value.

If you want to ensure a variable is always set to a specific value, should you use !default?

A No, omit !default to force the value

B No, use !important instead

C Yes, but only for colors

D Yes, always use !default

Omitting !default means the variable will be overwritten no matter what, ensuring the value is set.

Can !default be used multiple times on the same variable in different files?

A Yes, it overwrites each time

B No, it causes errors

C Yes, the first set value stays

D No, only one !default per project

The first time the variable is set, it keeps that value. Later !default assignments do not overwrite it.

Explain how the !default flag works in Sass variables and why it is useful.

Think about how you can set a backup value that only applies if no other value exists.

Describe a real-life situation where using !default in Sass variables would help you manage styles better.

Imagine you make a button style library others use and want them to change colors easily.