Token-driven color palettes in SASS - Performance & Optimization

Performance: Token-driven color palettes

MEDIUM IMPACT

This affects CSS rendering speed and style recalculations by controlling how colors are applied and reused across the site.

Applying consistent colors across many components

SASS

$color-primary: #3498db;
$color-palette: (
  primary: $color-primary,
  secondary: #2ecc71,
  accent: #e74c3c
);
.button { background-color: map-get($color-palette, primary); }
.card { border-color: map-get($color-palette, primary); }
.alert { color: map-get($color-palette, primary); }

Centralizes color definitions in tokens, so changing one token updates all uses without duplication.

📈 Performance GainReduces CSS size and style recalculations; improves visual stability (lower CLS).

Applying consistent colors across many components

SASS

$primary-color: #3498db;
.button { background-color: #3498db; }
.card { border-color: #3498db; }
.alert { color: #3498db; }

Hardcoding the same color value multiple times causes duplication and makes updates costly, leading to inconsistent styles and potential layout shifts.

📉 Performance CostTriggers multiple style recalculations when colors change; increases CSS size unnecessarily.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Hardcoded repeated colors	No extra DOM nodes	Multiple reflows if colors change	Higher paint cost due to style thrashing	[X] Bad
Token-driven color palette	No extra DOM nodes	Single reflow on token change	Lower paint cost with stable styles	[OK] Good

Rendering Pipeline

Token-driven palettes simplify CSS by using variables that the browser compiles once, reducing repeated style recalculations and layout shifts.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to repeated color value changes

Core Web Vital Affected

CLS

This affects CSS rendering speed and style recalculations by controlling how colors are applied and reused across the site.

Optimization Tips

1Always define colors as tokens or variables to reuse them efficiently.

2Avoid repeating raw color values in multiple CSS rules.

3Update color tokens to change colors globally with minimal style recalculations.

Performance Quiz - 3 Questions

What is a main performance benefit of using token-driven color palettes in CSS?

A They reduce repeated color declarations, lowering style recalculations.

B They increase the number of DOM nodes for colors.

C They force the browser to repaint the entire page on color change.

D They add extra JavaScript to manage colors.

DevTools: Performance

How to check: Record a performance profile while interacting with color changes or theme switches; look for style recalculation and layout shift events.

What to look for: Fewer style recalculation events and minimal layout shifts indicate good token usage.

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