Variable declaration with $ in SASS - Mini Project: Build & Apply

Using Variables with $ in Sass

📖 Scenario: You are creating a simple style sheet for a website. To keep colors consistent and easy to change, you will use variables in Sass.

🎯 Goal: Create a Sass file that uses variables declared with $ to style a heading and a paragraph with consistent colors.

📋 What You'll Learn

Declare color variables using $

Use the variables to set colors in CSS selectors

Write valid Sass code that compiles to CSS

💡 Why This Matters

🌍 Real World

Web developers use Sass variables to manage colors, fonts, and other style values efficiently across large projects.

💼 Career

Knowing how to use Sass variables is a common skill required for front-end developer roles to write maintainable and scalable CSS.

1

Declare color variables with $

Create two variables called $primary-color and $secondary-color with the values #3498db and #2ecc71 respectively.

SASS

// Declare $primary-color and $secondary-color variables
// Your code here

Need a hint?

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

2

Use variables in heading style

Add a CSS rule for h1 that sets the color property to the variable $primary-color.

SASS

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

h1 {
  /* Set color using $primary-color */
  /* Your code here */
}

Need a hint?

Inside the h1 block, write color: $primary-color; to use the variable.

3

Use variables in paragraph style

Add a CSS rule for p that sets the color property to the variable $secondary-color.

SASS

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

h1 {
  color: $primary-color;
}

p {
  /* Set color using $secondary-color */
  /* Your code here */
}

Need a hint?

Inside the p block, write color: $secondary-color; to use the variable.

4

Add background color using variable

Add a CSS rule for body that sets the background-color property to the variable $primary-color.

SASS

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

h1 {
  color: $primary-color;
}

p {
  color: $secondary-color;
}

body {
  /* Set background-color using $primary-color */
  /* Your code here */
}

Need a hint?

Inside the body block, write background-color: $primary-color; to use the variable.