Why Variable declaration with $ in SASS? - Purpose & Use Cases

The Big Idea

What if you could change your entire website's color with just one simple edit?

The Scenario

Imagine you are styling a website and you want to use the same shade of blue in many places. You write the color code everywhere by hand, like in the header, buttons, and links.

The Problem

If you decide to change that blue later, you have to find and replace every single color code manually. This is slow, easy to miss spots, and can cause inconsistent colors on your site.

The Solution

Using variables with $ lets you store a value once and reuse it everywhere. Change the variable once, and all places using it update automatically.

Before vs After

✗ Before

button {
  background-color: #3498db;
}
header {
  color: #3498db;
}

✓ After

$main-color: #3498db;
button {
  background-color: $main-color;
}
header {
  color: $main-color;
}

What It Enables

This makes your styles easier to manage, update, and keep consistent across your whole website.

Real Life Example

Think about a brand color used on a company website. If the brand updates their color, you just change the variable once instead of hunting down every instance.

Key Takeaways

Variables store reusable values like colors or sizes.

Using $ saves time and avoids mistakes.

Changing one variable updates all related styles automatically.