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.

Practice

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