0
0
SASSmarkup~5 mins

Why design systems need SASS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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.