Why variables reduce repetition in SASS - See It in Action

Why Variables Reduce Repetition in Sass

📖 Scenario: You are creating a simple style sheet for a website. You want to use the same color and font size in many places. Instead of writing the color and font size again and again, you will use variables to store these values once and reuse them.

🎯 Goal: Build a Sass file that uses variables to store a color and a font size. Then use these variables in multiple CSS rules to style headings and paragraphs.

📋 What You'll Learn

Create a variable called $main-color with the value #3498db

Create a variable called $main-font-size with the value 1.5rem

Use $main-color for the color of h1 and h2 elements

Use $main-font-size for the font size of p elements

💡 Why This Matters

🌍 Real World

Web designers use variables to keep their color schemes and fonts consistent across many pages.

💼 Career

Knowing how to use variables in Sass is important for front-end developers to write clean, maintainable CSS.

1

Create variables for color and font size

Create a Sass variable called $main-color and set it to #3498db. Also create a variable called $main-font-size and set it to 1.5rem.

SASS

// Create variables $main-color and $main-font-size
// Your code here

Need a hint?

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

2

Use the color variable for headings

Use the variable $main-color to set the color property for both h1 and h2 selectors.

SASS

$main-color: #3498db;
$main-font-size: 1.5rem;

// Use $main-color for h1 and h2 color
// Your code here

Need a hint?

Write CSS selectors h1 and h2 and set their color to $main-color.

3

Use the font size variable for paragraphs

Use the variable $main-font-size to set the font-size property for the p selector.

SASS

$main-color: #3498db;
$main-font-size: 1.5rem;

h1 {
  color: $main-color;
}
h2 {
  color: $main-color;
}

// Use $main-font-size for p font-size
// Your code here

Need a hint?

Write a CSS selector p and set its font-size to $main-font-size.

4

Add a hover effect using the color variable

Add a hover effect to a elements that changes their color to $main-color when hovered.

SASS

$main-color: #3498db;
$main-font-size: 1.5rem;

h1 {
  color: $main-color;
}
h2 {
  color: $main-color;
}

p {
  font-size: $main-font-size;
}

// Add hover effect for a elements
// Your code here

Need a hint?

Use the selector a:hover and set color to $main-color.