Design token management in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this Sass variable usage?

Given the Sass code below, what will be the rendered CSS for the .button class?

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: #000000;
  color: white;
}

D

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

💡 Hint

Sass variables are replaced with their values during compilation.

Sass variables like $primary-color are replaced by their assigned values in the compiled CSS. So $primary-color becomes #3498db.

🧠 Conceptual

intermediate

Which Sass feature helps manage design tokens for colors and spacing?

You want to keep your design tokens like colors and spacing organized and reusable in Sass. Which feature is best suited for this?

A Writing all tokens as separate global variables without grouping

B Using Sass maps to group tokens by category

C Using Sass mixins only for tokens

D Using plain CSS variables inside Sass files

💡 Hint

Think about grouping related values together for easy access.

Sass maps allow grouping related design tokens (like colors or spacing) in one place, making management easier and code cleaner.

❓ selector

advanced

What CSS selector is generated by this Sass nesting with design tokens?

Consider the Sass code below using design tokens. What is the final CSS selector for the nested rule?

SASS

$colors: (
  primary: #3498db
);

.button {
  background-color: map-get($colors, primary);
  &:hover {
    background-color: darken(map-get($colors, primary), 10%);
  }
}

A .button > hover

B .button .hover

C .button:hover

D .button:hovered

💡 Hint

The ampersand (&) represents the parent selector in Sass nesting.

In Sass, &:hover means the parent selector with :hover pseudo-class, so it compiles to .button:hover.

❓ layout

advanced

How to use design tokens with Flexbox in Sass for responsive layout?

You have spacing tokens in Sass and want to create a flex container with consistent gaps. Which Sass code correctly applies the spacing token as gap in a flex container?

SASS

$spacing: (
  small: 1rem,
  medium: 2rem
);

.container {
  display: flex;
  gap: map-get($spacing, medium);
}

A

.container {
  display: flex;
  gap: 2rem;
}

B

.container {
  display: flex;
  gap: $spacing.medium;
}

C

.container {
  display: flex;
  gap: map-get($spacing, small);
}

D

.container {
  display: flex;
  gap: 1rem;
}

💡 Hint

Remember how to get values from Sass maps and how they compile.

Using map-get($spacing, medium) returns 2rem, so the compiled CSS sets gap: 2rem; for the flex container.

❓ accessibility

expert

How to use design tokens in Sass to ensure accessible color contrast?

You have design tokens for colors in Sass. Which approach best helps maintain accessible color contrast between text and background using these tokens?

A Define separate tokens for background and text colors ensuring contrast ratios, then use them together in styles

B Use the same color token for both background and text to keep consistency

C Only define background color tokens and let text color be black by default

D Use random colors from tokens without checking contrast

💡 Hint

Accessibility requires good contrast between text and background colors.

Defining separate tokens for background and text colors with good contrast ensures readability and accessibility compliance.