Default values with !default in SASS - Mini Project: Build & Apply

Using Default Values with !default in Sass

📖 Scenario: You are creating a Sass stylesheet for a website. You want to set some color variables that can be changed later if needed, but if no changes are made, your default colors should be used.

🎯 Goal: Build a Sass file that defines color variables with default values using !default. This allows other stylesheets to override these colors before your defaults apply.

📋 What You'll Learn

Create three color variables with specific default values.

Use !default to set these variables so they only apply if the variables are not already set.

Write a CSS rule that uses these variables for background and text colors.

Ensure the Sass compiles to valid CSS with the correct colors.

💡 Why This Matters

🌍 Real World

Using !default in Sass variables is common in real projects to provide default theme colors that can be customized by other parts of the project or by users.

💼 Career

Understanding how to use !default helps you write flexible, maintainable stylesheets that can adapt to different design needs without changing core code.

1

Create initial color variables without defaults

Create three Sass variables called $primary-color, $secondary-color, and $text-color with these exact values: #3498db, #2ecc71, and #333333 respectively.

SASS

// Create the three color variables with the exact values
// Your code here

Hint

Use the syntax $variable-name: value; to create variables in Sass.

2

Add !default to color variables

Modify the three variables $primary-color, $secondary-color, and $text-color to include !default after their values so they only set if not already defined.

SASS

$primary-color: #3498db;
$secondary-color: #2ecc71;
$text-color: #333333;

// Add !default to each variable above
// Your code here

Hint

Add !default right after the value and before the semicolon.

3

Create a CSS rule using the color variables

Write a CSS rule for the body element that sets background-color to $primary-color and color to $text-color.

SASS

$primary-color: #3498db !default;
$secondary-color: #2ecc71 !default;
$text-color: #333333 !default;

// Add a CSS rule for body using $primary-color and $text-color
// Your code here

Hint

Use normal CSS syntax but replace colors with the Sass variables.

4

Add a CSS rule using the secondary color

Add a CSS rule for a class called .button that sets background-color to $secondary-color and color to #fff (white).

SASS

$primary-color: #3498db !default;
$secondary-color: #2ecc71 !default;
$text-color: #333333 !default;

body {
  background-color: $primary-color;
  color: $text-color;
}

// Add a CSS rule for .button using $secondary-color and white text
// Your code here

Hint

Write a CSS rule for .button with the specified colors.

Practice

1. What does the !default flag do when used with a Sass variable?

easy

A. It makes the variable global regardless of scope.

B. It sets the variable only if it has not been set before.

C. It deletes the variable after use.

D. It forces the variable to always overwrite previous values.

Solution

1. Step 1: Understand the purpose of !default

   The !default flag in Sass is used to assign a value to a variable only if it has not been assigned a value before.

2. Step 2: Compare with other options

   The other options describe behaviors that !default does not perform. It does not make the variable global regardless of scope, force overwrites of previous values, or delete the variable after use.

3. Final Answer:

   It sets the variable only if it has not been set before. -> Option B

4. Quick Check:

   !default means set if unset [OK]

Hint: Remember: !default sets only if variable is unset [OK]

Common Mistakes:

• Thinking !default always overwrites values
• Confusing !default with variable scope
• Assuming !default deletes variables

2. Which of the following is the correct syntax to assign a default value of blue to a Sass variable $color?

easy

A. $color: blue !important;

B. $color: blue;

C. $color = blue !default;

D. $color: blue !default;

Solution

1. Step 1: Recall Sass variable assignment syntax

   Sass variables are assigned using $variable-name: value;. To set a default value, add !default after the value.

2. Step 2: Check each option

   $color: blue; assigns a value but does not use !default. $color: blue !default; correctly uses !default. $color = blue !default; uses an invalid assignment operator =. $color: blue !important; uses !important which is CSS, not Sass variable syntax.

3. Final Answer:

   $color: blue !default; -> Option D

4. Quick Check:

   Correct syntax uses colon and !default [OK]

Hint: Use colon and !default to set default Sass variables [OK]

Common Mistakes:

• Using = instead of : for variable assignment
• Confusing !default with !important
• Omitting !default when intending default value

3. Given the following Sass code, what will be the value of $font-size after compilation?

$font-size: 16px !default;
$font-size: 18px;

medium

A. 18px

B. 16px

C. Error: Duplicate variable assignment

D. Undefined

Solution

1. Step 1: Understand the effect of !default on first assignment

   The first line sets $font-size to 16px only if it is not already set. Since it is the first assignment, it sets $font-size to 16px.

2. Step 2: Analyze the second assignment without !default

   The second line assigns $font-size to 18px unconditionally, overwriting the previous value.

3. Final Answer:

   18px -> Option A

4. Quick Check:

   Later assignment overwrites default [OK]

Hint: Later assignments override !default values [OK]

Common Mistakes:

• Assuming !default prevents any overwrite
• Thinking duplicate assignments cause errors
• Ignoring order of variable declarations

4. Identify the error in the following Sass code snippet:

$primary-color: red !default
$primary-color: blue;

medium

A. Cannot assign two values to the same variable.

B. Incorrect use of !default flag.

C. Missing semicolon after first variable declaration.

D. Variables must be declared inside a selector.

Solution

1. Step 1: Check syntax of variable declarations

   In Sass, each variable declaration must end with a semicolon. The first line is missing a semicolon after !default.

2. Step 2: Verify other options

   Assigning two values to the same variable is allowed; the later overwrites the earlier. The use of !default is correct. Variables can be declared globally, not only inside selectors.

3. Final Answer:

   Missing semicolon after first variable declaration. -> Option C

4. Quick Check:

   Every Sass statement ends with semicolon [OK]

Hint: Always end Sass variable lines with semicolon [OK]

Common Mistakes:

• Omitting semicolon after !default
• Thinking multiple assignments cause errors
• Believing variables must be inside selectors

5. You want to create a Sass file that allows users to override a default button color. Which code snippet correctly uses !default to achieve this?

hard

A. $button-color: blue !default;
// User sets $button-color: green before importing this file

B. $button-color: blue !default;
$button-color: green;

C. $button-color: green;
$button-color: blue !default;

D. $button-color: blue !default;

Solution

1. Step 1: Understand how !default works with user overrides

   The !default flag sets a variable only if it is not already set. To allow user override, the user must set the variable before this file is loaded.

2. Step 2: Analyze each option

   $button-color: green; $button-color: blue !default; sets $button-color first without !default, then tries to set default, which won't work as intended. $button-color: blue !default; $button-color: green; sets default first, then overwrites it, so user cannot override easily. $button-color: blue !default; sets default but does not mention user override. $button-color: blue !default; // User sets $button-color: green before importing this file correctly shows default with comment explaining user sets variable before import, enabling override.

3. Final Answer:

   Use !default and let user set variable before import. -> Option A

4. Quick Check:

   User sets variable before default with !default [OK]

Hint: User must set variable before default for override [OK]

Common Mistakes:

• Setting default after user value
• Not allowing user to set variable before import
• Confusing order of assignments