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.

Practice

1. What is the main purpose of design tokens in Sass?

easy

A. To write JavaScript functions inside Sass

B. To create animations in Sass

C. To store reusable style values like colors and sizes

D. To manage HTML structure

Solution

1. Step 1: Understand design tokens concept

   Design tokens are variables that hold style values such as colors, fonts, and sizes.

2. Step 2: Identify their purpose in Sass

   They help keep styles consistent and easy to update by reusing these values.

3. Final Answer:

   To store reusable style values like colors and sizes -> Option C

4. Quick Check:

   Design tokens = reusable style values [OK]

Hint: Design tokens store style values for reuse [OK]

Common Mistakes:

• Thinking design tokens are for animations
• Confusing design tokens with JavaScript code
• Believing design tokens manage HTML

2. Which of the following is the correct way to declare a design token for a primary color in Sass?

easy

A. let $primary-color = #3498db;

B. primary-color = #3498db;

C. var primary-color = #3498db;

D. $primary-color: #3498db;

Solution

1. Step 1: Recall Sass variable syntax

   Sass variables start with a dollar sign ($) and use a colon to assign values.

2. Step 2: Check each option

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

3. Final Answer:

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

4. Quick Check:

   Sass variables start with $ and use : [OK]

Hint: Sass variables start with $ and use colon : [OK]

Common Mistakes:

• Using JavaScript variable syntax in Sass
• Omitting the $ sign before variable name
• Using = instead of : for assignment

3. Given the Sass code:

$font-size-base: 1.6rem;
$font-size-large: $font-size-base * 1.5;

body {
  font-size: $font-size-large;
}

What will be the computed font size for the body element?

medium

A. 2.4rem

B. 1.5rem

C. 1.6rem

D. 3.1rem

Solution

1. Step 1: Calculate $font-size-large value

   $font-size-large is $font-size-base multiplied by 1.5, so 1.6rem * 1.5 = 2.4rem.

2. Step 2: Apply value to body font-size

   The body font-size uses $font-size-large, so it will be 2.4rem.

3. Final Answer:

   2.4rem -> Option A

4. Quick Check:

   1.6rem * 1.5 = 2.4rem [OK]

Hint: Multiply base size by factor for large size [OK]

Common Mistakes:

• Using 1.5rem instead of multiplying
• Confusing base size with large size
• Forgetting to multiply the values

4. Identify the error in this Sass code for managing design tokens:

$color-primary: #ff0000
$color-secondary: #00ff00;

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

medium

A. Missing semicolon after $color-primary declaration

B. Wrong variable name syntax

C. Using hex colors is not allowed in Sass variables

D. Background color property is invalid

Solution

1. Step 1: Check variable declarations

   $color-primary is missing a semicolon at the end of the line, which is required in Sass.

2. Step 2: Verify other parts

   Variable names and background-color property are correct. Hex colors are valid.

3. Final Answer:

   Missing semicolon after $color-primary declaration -> Option A

4. Quick Check:

   Each Sass variable line must end with ; [OK]

Hint: Always end Sass variable lines with semicolon ; [OK]

Common Mistakes:

• Omitting semicolons after variable declarations
• Thinking hex colors are invalid in Sass
• Misnaming variables without $ sign

5. You want to create a design token system in Sass that allows easy theme switching between light and dark modes. Which approach below best manages color tokens for this purpose?

hard

A. Hardcode colors directly in CSS without variables

B. Define separate maps for light and dark colors, then use a variable to select the active map

C. Use JavaScript to change colors only, ignoring Sass variables

D. Create one set of variables and manually change each color in the stylesheet

Solution

1. Step 1: Understand theme switching needs

   Theme switching requires grouping colors so you can easily swap them based on mode.

2. Step 2: Evaluate options for managing tokens

   Using separate Sass maps for light and dark themes allows selecting the active theme map with a variable, making switching easy and maintainable.

3. Step 3: Reject other options

   Hardcoding colors or manual changes are error-prone and not scalable. JavaScript alone ignores Sass benefits.

4. Final Answer:

   Define separate maps for light and dark colors, then use a variable to select the active map -> Option B

5. Quick Check:

   Use maps and variables for theme switching [OK]

Hint: Use Sass maps and a variable to switch themes [OK]

Common Mistakes:

• Hardcoding colors instead of using variables
• Ignoring Sass variables and relying only on JavaScript
• Manually changing colors everywhere instead of grouping