Token-driven color palettes in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS color value?

Given the following Sass code using color tokens, what is the final CSS color value for .button background?

SASS

$color-primary: #3498db;
$color-secondary: #2ecc71;
$color-background: $color-primary;

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

A background-color: #2ecc71;

B background-color: #3498db;

C background-color: $color-primary;

D background-color: #000000;

💡 Hint

Remember that Sass variables are replaced with their values during compilation.

The variable $color-background is assigned the value of $color-primary, which is #3498db. So the background-color becomes #3498db in the compiled CSS.

🧠 Conceptual

intermediate

Which Sass feature helps create token-driven color palettes?

Which Sass feature is best suited to create reusable color tokens for a design system?

A Variables

B Functions

C Mixins

D Placeholders

💡 Hint

Think about how you store fixed values like colors to reuse them.

Variables store fixed values like colors and can be reused throughout the stylesheet, making them ideal for token-driven palettes.

❓ selector

advanced

Which selector applies the token-driven color correctly?

Given the Sass tokens below, which CSS selector applies the secondary color to all button elements inside a .card?

SASS

$color-secondary: #2ecc71;

.card {
  button {
    color: $color-secondary;
  }
}

A .card button { color: #2ecc71; }

B button .card { color: #2ecc71; }

C .card > button { color: $color-secondary; }

D button.card { color: #2ecc71; }

💡 Hint

Remember how nested selectors compile in Sass.

The nested Sass selector compiles to '.card button' which applies the color to all button elements inside .card.

❓ layout

advanced

How to use token-driven colors with Flexbox layout?

You want to create a horizontal navigation bar with background color from a token. Which Sass code correctly applies the token and Flexbox layout?

SASS

$nav-bg: #1abc9c;

.navbar {
  display: flex;
  background-color: $nav-bg;
  justify-content: center;
}

A .navbar { display: grid; background-color: #1abc9c; justify-content: center; }

B .navbar { display: block; background-color: $nav-bg; justify-content: center; }

C .navbar { display: flex; background-color: #1abc9c; justify-content: center; }

D .navbar { display: flex; background-color: $nav-bg; justify-content: left; }

💡 Hint

Flexbox requires display:flex and the token variable must be replaced with its value.

Option C correctly sets display:flex, uses the token value #1abc9c for background-color, and centers content with justify-content:center.

❓ accessibility

expert

Which token-driven color choice improves accessibility for text contrast?

You have these Sass color tokens: $color-light: #f0f0f0; $color-dark: #222222; Which background and text color token pairing ensures good contrast for accessibility?

A Background: $color-light; Text: $color-light

B Background: $color-light; Text: $color-dark

C Background: $color-dark; Text: $color-dark

D Background: $color-dark; Text: $color-light

💡 Hint

High contrast means dark text on light background or vice versa.

Option D uses a dark background with light text, which provides strong contrast and better readability for accessibility.