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

Need a 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

Need a 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

Need a 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

Need a hint?

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