Reducing compiled CSS size in SASS - Mini Project: Build & Apply

Reducing compiled CSS size with Sass

📖 Scenario: You are working on a website with multiple buttons that share similar styles. To keep your CSS file small and easy to maintain, you want to use Sass features to reduce repeated code.

🎯 Goal: Build a Sass stylesheet that uses variables and nesting to reduce the compiled CSS size while styling two types of buttons: .btn-primary and .btn-secondary.

📋 What You'll Learn

Create a Sass variable for the main button color

Use nesting to style .btn-primary and .btn-secondary inside a common .btn class

Use the variable for the background color of .btn-primary

Add a different background color for .btn-secondary without repeating common styles

💡 Why This Matters

🌍 Real World

Web developers often need to write CSS that is easy to maintain and small in size to improve website speed and readability.

💼 Career

Knowing how to use Sass variables, nesting, and functions is a valuable skill for front-end developers to write efficient and scalable stylesheets.

1

Create a color variable

Create a Sass variable called $main-color and set it to #3498db.

SASS

// Your code here

Need a hint?

Use $main-color: #3498db; to create the variable.

2

Add base button styles with nesting

Create a .btn class and nest styles for .btn-primary and .btn-secondary inside it. Add padding: 1rem 2rem; and border-radius: 0.5rem; to .btn.

SASS

$main-color: #3498db;

// Your code here

Need a hint?

Use .btn { padding: 1rem 2rem; border-radius: 0.5rem; } and nest &-primary and &-secondary inside.

3

Add background colors using the variable and a new color

Inside .btn-primary, set background-color to $main-color. Inside .btn-secondary, set background-color to #2ecc71.

SASS

$main-color: #3498db;

.btn {
  padding: 1rem 2rem;
  border-radius: 0.5rem;

  &-primary {
    // Your code here
  }

  &-secondary {
    // Your code here
  }
}

Need a hint?

Use background-color: $main-color; for .btn-primary and background-color: #2ecc71; for .btn-secondary.

4

Add common text color and hover effect

Add color: white; to the .btn class. Then add a hover effect inside .btn-primary that changes background-color to darken($main-color, 10%) using the Sass darken() function.

SASS

$main-color: #3498db;

.btn {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  // Your code here

  &-primary {
    background-color: $main-color;
    // Your code here
  }

  &-secondary {
    background-color: #2ecc71;
  }
}

Need a hint?

Add color: white; inside .btn and use &:hover inside &-primary with background-color: darken($main-color, 10%);.