Why design systems need SASS - See It in Action

Why Design Systems Need SASS

📖 Scenario: You are building a design system for a website. This system will help keep colors, fonts, and spacing consistent across many pages. To make this easier, you will use SASS, a tool that helps write CSS faster and cleaner.

🎯 Goal: Create a simple SASS setup that shows how variables and nesting help organize styles in a design system.

📋 What You'll Learn

Create SASS variables for primary color, secondary color, and base font size

Use nesting to style a button inside a container

Use the variables inside the styles

Show how changing a variable updates all related styles

💡 Why This Matters

🌍 Real World

Design systems use SASS to manage colors, fonts, and layout consistently across many pages. This saves time and avoids mistakes.

💼 Career

Front-end developers often use SASS in real projects to write cleaner, easier-to-maintain CSS for large websites and apps.

1

Set up SASS variables for colors and font size

Create three SASS variables: $primary-color with value #3498db, $secondary-color with value #2ecc71, and $base-font-size with value 1.6rem.

SASS

# Your code here

Need a hint?

Use $variable-name: value; to create SASS variables.

2

Create a container class and a button inside it using nesting

Write a SASS rule for a class .container. Inside it, nest a rule for a button element. Do not add styles yet.

SASS

$primary-color: #3498db;
$secondary-color: #2ecc71;
$base-font-size: 1.6rem;

.container {
  // Nest button styles here
  
}

Need a hint?

Use nesting by writing the child selector inside the parent block.

3

Add styles using variables inside the nested button

Inside the nested button rule, set background-color to $primary-color, color to white, and font-size to $base-font-size.

SASS

$primary-color: #3498db;
$secondary-color: #2ecc71;
$base-font-size: 1.6rem;

.container {
  button {
    // Add styles here
  }
}

Need a hint?

Use the variables by writing their names with a dollar sign, like $primary-color.

4

Add a hover effect using the secondary color

Inside the nested button rule, add a :hover selector that changes background-color to $secondary-color.

SASS

$primary-color: #3498db;
$secondary-color: #2ecc71;
$base-font-size: 1.6rem;

.container {
  button {
    background-color: $primary-color;
    color: white;
    font-size: $base-font-size;
    // Add hover styles here
  }
}

Need a hint?

Use &:hover inside the button block to add hover styles.