Why modular built-ins improve organization in SASS - See It in Action

Why Modular Built-ins Improve Organization with Sass

📖 Scenario: You are working on a website's styles. You want to keep your Sass code neat and easy to manage by using modular built-in features like variables and mixins.

🎯 Goal: Build a small Sass project that uses variables and mixins to organize colors and button styles, showing how modular built-ins help keep styles clean and reusable.

📋 What You'll Learn

Create a Sass variable for the primary color

Create a mixin for a button style using the primary color

Use the mixin in a button selector

Add a hover effect inside the mixin

💡 Why This Matters

🌍 Real World

Web developers use Sass variables and mixins to keep large style sheets organized and easy to maintain.

💼 Career

Knowing how to use modular Sass features is important for front-end developers to write clean, scalable CSS.

1

Create a Sass variable for the primary color

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

SASS

# Your code here

Hint

Use $primary-color: #3498db; to define the color variable.

2

Create a mixin for a button style using the primary color

Create a mixin called button-style that sets background-color to $primary-color, color to white, and padding to 1rem 2rem.

SASS

$primary-color: #3498db;

// Your code here

Hint

Use @mixin button-style { ... } and inside set the styles using the variable.

3

Use the mixin in a button selector

Create a button selector and include the button-style mixin inside it.

SASS

$primary-color: #3498db;

@mixin button-style {
  background-color: $primary-color;
  color: white;
  padding: 1rem 2rem;
}

// Your code here

Hint

Use button { @include button-style; } to apply the mixin.

4

Add a hover effect inside the mixin

Inside the button-style mixin, add a :hover style that changes background-color to darken($primary-color, 10%).

SASS

$primary-color: #3498db;

@mixin button-style {
  background-color: $primary-color;
  color: white;
  padding: 1rem 2rem;
  // Your code here
}

button {
  @include button-style;
}

Hint

Use &:hover { background-color: darken($primary-color, 10%); } inside the mixin.