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.

Practice

1. What is the main purpose of using token-driven color palettes in Sass?

easy

A. To store colors in variables for easy reuse and consistency

B. To write colors directly in CSS without variables

C. To create animations with colors

D. To import images as color backgrounds

Solution

1. Step 1: Understand what tokens are in Sass

   Tokens are variables that hold values, like colors, to reuse easily.

2. Step 2: Identify the benefit of using tokens

   Using tokens keeps colors consistent and easy to update across the project.

3. Final Answer:

   To store colors in variables for easy reuse and consistency -> Option A

4. Quick Check:

   Color tokens = variables for consistent colors [OK]

Hint: Tokens are variables holding colors for reuse [OK]

Common Mistakes:

• Thinking tokens are for animations
• Confusing tokens with direct CSS colors
• Assuming tokens import images

2. Which of the following is the correct way to define a color token in Sass?

easy

A. primary-color = #3498db;

B. $primary-color: #3498db;

C. var(--primary-color: #3498db);

D. color 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

   $primary-color: #3498db; uses correct Sass syntax: $primary-color: #3498db;. Others use invalid syntax.

3. Final Answer:

   $primary-color: #3498db; -> Option B

4. Quick Check:

   Sass variables start with $ [OK]

Hint: Sass variables always start with $ [OK]

Common Mistakes:

• Using CSS variable syntax in Sass
• Omitting the $ sign
• Using equal sign instead of colon

3. Given the Sass code:

$color-primary: #ff0000;
.button {
  background-color: $color-primary;
}

What color will the button background be in the browser?

medium

A. Red

B. Green

C. Blue

D. Transparent

Solution

1. Step 1: Identify the token value

   The variable $color-primary is set to #ff0000, which is red.

2. Step 2: Check usage in CSS

   The button's background-color uses $color-primary, so it will be red.

3. Final Answer:

   Red -> Option A

4. Quick Check:

   Variable $color-primary = #ff0000 (red) [OK]

Hint: Match hex code #ff0000 to red color [OK]

Common Mistakes:

• Confusing hex codes with other colors
• Ignoring variable usage
• Assuming default color

4. Identify the error in this Sass code snippet:

$accent-color #00ff00;
.text {
  color: $accent-color;
}

medium

A. Missing semicolon after color property

B. Variable name should not start with $

C. Color value is invalid

D. Missing colon after variable name

Solution

1. Step 1: Check variable declaration syntax

   Sass variables require a colon (:) between name and value.

2. Step 2: Locate the error

   The code has $accent-color #00ff00; missing the colon after $accent-color.

3. Final Answer:

   Missing colon after variable name -> Option D

4. Quick Check:

   Variable declaration needs colon : [OK]

Hint: Variable declarations need colon : after name [OK]

Common Mistakes:

• Forgetting colon in variable declaration
• Removing $ from variable name
• Assuming color value is wrong

5. You want to create a token-driven color palette with light and dark modes using Sass variables. Which approach correctly switches colors based on a data-theme attribute on the body, with light mode as the default?

hard

A. $color-bg-light: #ffffff;
$color-bg-dark: #000000;

body[data-theme='light'] {
background-color: $color-bg-light;
}
body[data-theme='dark'] {
background-color: $color-bg-dark;
}

B. $color-bg-light: #ffffff;
$color-bg-dark: #000000;

body {
background-color: $color-bg-light;
}
body[data-theme='dark'] {
background-color: $color-bg-light;
}

C. $color-bg-light: #ffffff;
$color-bg-dark: #000000;

body {
background-color: $color-bg-light;
&[data-theme='dark'] {
background-color: $color-bg-dark;
}
}

D. $color-bg-light: #ffffff;
$color-bg-dark: #000000;

body {
background-color: $color-bg-dark;
}
body[data-theme='light'] {
background-color: $color-bg-light;
}

Solution

1. Step 1: Understand how to nest selectors in Sass

   $color-bg-light: #ffffff;
   $color-bg-dark: #000000;
   
   body {
     background-color: $color-bg-light;
     &[data-theme='dark'] {
       background-color: $color-bg-dark;
     }
   }

   uses nesting with &[data-theme='dark'] inside body, which is valid Sass syntax.

2. Step 2: Check color assignments for light and dark modes

   $color-bg-light: #ffffff;
   $color-bg-dark: #000000;
   
   body {
     background-color: $color-bg-light;
     &[data-theme='dark'] {
       background-color: $color-bg-dark;
     }
   }

   sets light mode as default and overrides background for dark mode correctly.

3. Step 3: Compare other options

   $color-bg-light: #ffffff;
   $color-bg-dark: #000000;
   
   body[data-theme='light'] {
     background-color: $color-bg-light;
   }
   body[data-theme='dark'] {
     background-color: $color-bg-dark;
   }

   is valid CSS but not Sass nesting style;

   $color-bg-light: #ffffff;
   $color-bg-dark: #000000;
   
   body {
     background-color: $color-bg-light;
   }
   body[data-theme='dark'] {
     background-color: $color-bg-light;
   }

   sets dark mode to light color (wrong);

   $color-bg-light: #ffffff;
   $color-bg-dark: #000000;
   
   body {
     background-color: $color-bg-dark;
   }
   body[data-theme='light'] {
     background-color: $color-bg-light;
   }

   sets dark mode as default and light mode override, which is less common.

4. Final Answer:

   Sass nested selectors with light default and dark override -> Option C

5. Quick Check:

   Sass nesting with & and tokens for themes [OK]

Hint: Use & to nest attribute selectors in Sass [OK]

Common Mistakes:

• Confusing CSS and Sass nesting syntax
• Assigning wrong colors to themes
• Not using tokens for colors