Why Reducing compiled CSS size in SASS? - Purpose & Use Cases

The Big Idea

What if you could change your entire website's look by editing just one line of code?

The Scenario

Imagine you build a website with many styles. You write CSS for buttons, headers, and layouts by copying and pasting similar code everywhere.

The Problem

When you change a color or font, you must update it in many places. This takes time and can cause mistakes. The CSS file becomes very large, making the website slow to load.

The Solution

Using Sass features like variables, mixins, and nesting helps you write CSS once and reuse it. This keeps your CSS smaller and easier to update.

Before vs After

✗ Before

button {
  background-color: blue;
  color: white;
}
.header {
  background-color: blue;
  color: white;
}

✓ After

$main-color: blue;
.shared {
  background-color: $main-color;
  color: white;
}
button {
  @extend .shared;
}
.header {
  @extend .shared;
}

What It Enables

You can create faster websites with cleaner code that is easy to maintain and update.

Real Life Example

A company website changes its brand color. With Sass variables, you update the color in one place, and all buttons, headers, and links update automatically.

Key Takeaways

Manual CSS copying causes large files and errors.

Sass helps reuse code with variables and mixins.

Smaller CSS means faster loading and easier updates.