Why design systems need SASS - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use variables in SASS for design systems?

What is the main benefit of using variables in SASS when building a design system?

A They make the website load faster by compressing CSS.

B They allow consistent reuse of colors and fonts across the entire system.

C They replace the need for CSS selectors entirely.

D They automatically generate HTML elements for the design system.

💡 Hint

Think about how design systems keep styles uniform across many pages.

Variables in SASS store values like colors and fonts so you can reuse them everywhere. This keeps the design consistent and easy to update.

📝 Syntax

intermediate

What does this SASS code output in CSS?

Given the SASS code below, what is the compiled CSS output?

SASS

$primary-color: #3498db;
.button {
  background-color: $primary-color;
  color: white;
}

A

.button {
  background-color: blue;
  color: white;
}

B

.button {
  background-color: $primary-color;
  color: white;
}

C

.button {
  background-color: #3498db;
  color: white;
}

D SyntaxError: Undefined variable $primary-color

💡 Hint

SASS variables are replaced with their values during compilation.

The variable $primary-color is replaced by its value #3498db in the compiled CSS.

❓ selector

advanced

Which SASS selector nesting produces this CSS?

Which SASS code will compile to the following CSS? .button { color: white; } .button:hover { color: black; }

A

.button {
  color: white;
  &:hover {
    color: black;
  }
}

B

.button {
  color: white;
}
&:hover {
  color: black;
}

C

.button {
  color: white;
  .hover {
    color: black;
  }
}

D

.button {
  color: white;
  :hover {
    color: black;
  }
}

💡 Hint

Look for the correct way to nest pseudo-classes in SASS.

The &:hover syntax nests the hover state inside the .button selector, producing the correct CSS.

❓ layout

advanced

How does SASS help manage complex layouts in design systems?

Which SASS feature best helps organize and reuse layout styles in a design system?

A Mixins that group layout rules to reuse in multiple places.

B Variables that store pixel values for margins only.

C Functions that generate random colors for backgrounds.

D Direct HTML editing inside SASS files.

💡 Hint

Think about how to reuse groups of CSS rules easily.

Mixins let you write a set of CSS rules once and reuse them wherever needed, which is great for layouts.

❓ accessibility

expert

How can SASS improve accessibility in design systems?

Which SASS approach helps maintain accessible color contrast across a design system?

A Hardcoding all colors as fixed hex values without changes.

B Avoiding variables and writing all styles inline.

C Using only black and white colors for all elements.

D Using functions to calculate and adjust color brightness for contrast.

💡 Hint

Accessibility needs good contrast between text and backgrounds.

SASS functions can adjust colors dynamically to ensure text is readable against backgrounds, improving accessibility.