Why design systems need SASS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a SASS variable for primary color.

SASS

$primary-color: [1];

Drag options to blanks, or click blank then click option'

Aprimary

Bcolor

C#3498db

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color name without #

Using a word like 'primary' instead of a color value

The correct way to declare a color variable in SASS is by assigning a color value like a hex code.

2fill in blank

medium

Complete the code to create a nested style for a button inside a container.

SASS

.container {
  .button [1] {
    background-color: $primary-color;
  }
}

Drag options to blanks, or click blank then click option'

A:hover

B.hover

C#hover

D&:hover

Attempts:

3 left

💡 Hint

Common Mistakes

Using :hover without & inside nested block

Using .hover which is a class, not a pseudo-class

In SASS, to style a hover state nested inside a selector, use &:hover to refer to the parent selector with hover.

3fill in blank

hard

Fix the error in the SASS mixin definition to accept a color parameter.

SASS

@mixin button-style($color) {
  background-color: [1];
  border: 1px solid darken($color, 10%);
}

Drag options to blanks, or click blank then click option'

A$color

Bcolor

Cprimary-color

Dbackground

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable not passed as parameter

Using a hardcoded color instead of the parameter

The mixin uses the parameter $color to set the background color, so the variable $color must be used.

4fill in blank

hard

Fill both blanks to create a map of font sizes and access a size.

SASS

$font-sizes: (small: 0.8rem, medium: 1[1]rem);
body {
  font-size: map-get($font-sizes, [2]);
}

Drag options to blanks, or click blank then click option'

A.5

Bmedium

Csmall

D1.2

Attempts:

3 left

💡 Hint

Common Mistakes

Using full number 1.5 in one blank

Using wrong key name in map-get

The font size for medium is 1.5rem, so .5 completes 1.5rem. Then medium is used to get that size from the map.

5fill in blank

hard

Fill all three blanks to create a responsive grid with SASS variables and media query.

SASS

$columns: 12;
$gap: 1[1]rem;
.container {
  display: grid;
  grid-template-columns: repeat([2], 1fr);
  gap: $gap;
}
@media (max-width: [3]) {
  .container {
    grid-template-columns: repeat(6, 1fr);
  }
}

Drag options to blanks, or click blank then click option'

A.5

B12

C768px

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using 1 instead of .5 for gap

Using wrong number of columns

Using wrong media query size

The gap is 1.5rem, so .5 completes it. The grid uses 12 columns, so 12 is correct. The media query breakpoint is commonly 768px for tablets.

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