Bird
Raised Fist0
SASSmarkup~5 mins

Why design systems need SASS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Design systems help keep websites looking the same everywhere. SASS makes it easier to manage styles and reuse them, saving time and avoiding mistakes.

When you want to create a set of colors and fonts to use across many pages.
When you need to update a style in many places quickly.
When you want to organize your CSS better with smaller files.
When you want to use variables for colors or sizes instead of repeating values.
When you want to write cleaner and easier-to-read style code.
Syntax
SASS
$variable-name: value;

.selector {
  property: $variable-name;
  @include mixin-name();
  @extend .other-selector;
}

SASS uses $ to create variables for colors, sizes, and more.

You can reuse styles with @mixin and @extend to keep code DRY (Don't Repeat Yourself).

Examples
Use a variable for the main color to keep it consistent.
SASS
$primary-color: #3498db;

.button {
  background-color: $primary-color;
  color: white;
}
Mixins let you reuse groups of styles easily.
SASS
@mixin rounded-corners {
  border-radius: 0.5rem;
}

.card {
  @include rounded-corners;
  border: 1px solid #ccc;
}
@extend copies styles from one selector to another.
SASS
.alert {
  padding: 1rem;
  border: 1px solid red;
}

.error {
  @extend .alert;
  background-color: #fdd;
}
Sample Program

This example shows a simple button styled using variables and reusable styles from a design system. The colors and font are consistent and easy to update.

SASS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Design System with SASS</title>
  <style>
    /* Compiled CSS from SASS */
    :root {
      --primary-color: #3498db;
      --secondary-color: #2ecc71;
      --font-stack: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    body {
      font-family: var(--font-stack);
      margin: 2rem;
      background-color: #f9f9f9;
    }
    .button {
      background-color: var(--primary-color);
      color: white;
      padding: 0.75rem 1.5rem;
      border: none;
      border-radius: 0.5rem;
      cursor: pointer;
      font-size: 1rem;
      transition: background-color 0.3s ease;
    }
    .button:hover {
      background-color: var(--secondary-color);
    }
  </style>
</head>
<body>
  <button class="button" aria-label="Submit form">Submit</button>
</body>
</html>
OutputSuccess
Important Notes

SASS helps keep your design system organized and easy to update.

Using variables means you only change a color or size once, and it updates everywhere.

Mixins and extends reduce repeated code, making your styles cleaner.

Summary

SASS makes design systems easier to build and maintain.

Variables, mixins, and extends help reuse styles and keep things consistent.

Using SASS saves time and reduces mistakes in big projects.

Practice

(1/5)
1. Why do design systems benefit from using SASS?
easy
A. Because SASS allows reuse of styles with variables and mixins
B. Because SASS automatically creates images for design systems
C. Because SASS replaces HTML in design systems
D. Because SASS is a programming language for backend servers

Solution

  1. Step 1: Understand SASS features

    SASS provides variables, mixins, and extends to reuse styles easily.

  2. Step 2: Connect features to design systems

    Design systems need consistent styles and easy updates, which SASS helps with.

  3. Final Answer:

    Because SASS allows reuse of styles with variables and mixins -> Option A

  4. Quick Check:

    Reuse and consistency = A [OK]
Hint: Think about style reuse and consistency in design systems [OK]
Common Mistakes:
  • Confusing SASS with image or backend tools
  • Thinking SASS replaces HTML
  • Ignoring the role of variables and mixins
2. Which of the following is the correct way to declare a variable in SASS?
easy
A. $primary-color: #3498db;
B. var primary-color = #3498db;
C. primary-color: #3498db;
D. #primary-color = #3498db;

Solution

  1. Step 1: Recall SASS variable syntax

    SASS variables start with a dollar sign ($) followed by the name and value.

  2. Step 2: Check each option

    Only $primary-color: #3498db; uses the correct syntax: $primary-color: #3498db;.

  3. Final Answer:

    $primary-color: #3498db; -> Option A

  4. Quick Check:

    SASS variables start with $ = A [OK]
Hint: Remember SASS variables always start with $ [OK]
Common Mistakes:
  • Using JavaScript or CSS variable syntax
  • Omitting the $ sign
  • Using incorrect assignment symbols
3. Given the SASS code:
$base-color: #333;
@mixin button-style {
  background-color: $base-color;
  border-radius: 0.5rem;
}
.button {
  @include button-style;
  color: white;
}

What will be the background color of the .button class in the compiled CSS?
medium
A. transparent
B. white
C. #333
D. 0.5rem

Solution

  1. Step 1: Understand the mixin usage

    The mixin button-style sets background-color to $base-color, which is #333.

  2. Step 2: Check the included styles in .button

    The .button class includes the mixin, so its background color is #333.

  3. Final Answer:

    #333 -> Option C

  4. Quick Check:

    Mixin sets background-color = #333 [OK]
Hint: Look where variables are used inside mixins [OK]
Common Mistakes:
  • Confusing text color with background color
  • Ignoring mixin inclusion
  • Thinking border-radius affects color
4. Identify the error in this SASS code snippet used in a design system:
$font-size: 1.2rem
.title {
  font-size: $font-size;
}
medium
A. Incorrect variable name syntax
B. Mixin not included
C. Wrong property name font-size
D. Missing semicolon after variable declaration

Solution

  1. Step 1: Check variable declaration syntax

    SASS variables must end with a semicolon (;). The code misses it after $font-size: 1.2rem.

  2. Step 2: Verify other parts

    Variable name and property are correct; no mixin is needed here.

  3. Final Answer:

    Missing semicolon after variable declaration -> Option D

  4. Quick Check:

    Semicolon missing = B [OK]
Hint: Always end SASS variable lines with a semicolon [OK]
Common Mistakes:
  • Forgetting semicolons after variables
  • Confusing variable syntax with CSS
  • Assuming mixins are always required
5. In a large design system, how does using SASS variables and mixins help when the primary brand color changes?
hard
A. You need to rewrite all mixins to reflect the new color
B. You only update the color in one place, and all styles update automatically
C. SASS automatically detects brand changes without code updates
D. You must manually change the color in every CSS file

Solution

  1. Step 1: Understand variable role in design systems

    SASS variables store values like colors in one place for easy updates.

  2. Step 2: Apply to brand color change scenario

    Changing the variable updates all styles using it, avoiding manual edits everywhere.

  3. Final Answer:

    You only update the color in one place, and all styles update automatically -> Option B

  4. Quick Check:

    Single source update = D [OK]
Hint: Change variables once to update all related styles [OK]
Common Mistakes:
  • Thinking manual changes are needed everywhere
  • Believing SASS auto-detects brand changes
  • Assuming mixins must be rewritten