Multi-brand stylesheet generation in SASS - Performance & Optimization

Performance: Multi-brand stylesheet generation

MEDIUM IMPACT

This affects page load speed and rendering by increasing CSS file size and complexity, impacting LCP and potentially causing slower style calculations.

Creating stylesheets for multiple brands in a project

SASS

$brand-colors: (
  brand1: #123456,
  brand2: #654321
);

:root {
  --primary-color: map-get($brand-colors, brand1);
}

// Use CSS variables and shared styles, override only brand-specific values

Shares common styles and uses CSS variables for brand differences, reducing duplication.

📈 Performance GainSaves 50-70% CSS size per brand, reduces LCP by loading smaller CSS, and speeds style calculation.

Creating stylesheets for multiple brands in a project

SASS

@each $brand in $brands {
  @import "brand-#{$brand}.scss";
}

// Each brand file duplicates many common styles with minor changes

Duplicates common CSS across multiple brand files, increasing total CSS size and load time.

📉 Performance CostAdds 100-200kb per brand to CSS bundle, increasing LCP and blocking rendering longer.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Duplicated brand stylesheets	Low	Low	High due to large CSS	[X] Bad
Shared styles with CSS variables	Low	Low	Low	[OK] Good

Rendering Pipeline

The browser downloads CSS files, parses them, calculates styles, performs layout, paints pixels, and composites layers. Large or duplicated CSS increases parsing and style calculation time.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to large CSS and duplicated rules

Core Web Vital Affected

LCP

This affects page load speed and rendering by increasing CSS file size and complexity, impacting LCP and potentially causing slower style calculations.

Optimization Tips

1Avoid duplicating common CSS across brand stylesheets to reduce bundle size.

2Use CSS variables to manage brand-specific colors and styles efficiently.

3Keep CSS files small and shared to improve Largest Contentful Paint (LCP).

Performance Quiz - 3 Questions

What is a main performance drawback of generating separate full stylesheets for each brand?

A Increases CSS bundle size and slows page load

B Improves caching efficiency for all brands

C Reduces style recalculation time

D Eliminates layout shifts

DevTools: Performance

How to check: Record a page load, then inspect the 'Style Recalculation' and 'Layout' timings to see CSS impact.

What to look for: Long style recalculation or layout times indicate heavy or duplicated CSS slowing rendering.

Practice

1. What is the main benefit of using Sass maps in multi-brand stylesheet generation?

easy

A. They replace CSS variables with fixed values.

B. They automatically create HTML elements for each brand.

C. They prevent styles from being applied to any brand.

D. They store brand colors and styles in one place for easy reuse.

Solution

1. Step 1: Understand Sass maps role

   Sass maps hold key-value pairs, perfect for storing brand colors and styles centrally.

2. Step 2: Recognize reuse advantage

   Using maps lets you reuse brand data easily in loops, avoiding repetition.

3. Final Answer:

   They store brand colors and styles in one place for easy reuse. -> Option D

4. Quick Check:

   Sass maps = centralized brand styles [OK]

Hint: Maps hold brand data centrally for easy style reuse [OK]

Common Mistakes:

• Thinking maps create HTML elements
• Confusing maps with CSS variables
• Believing maps block styles

2. Which Sass syntax correctly loops over a map named $brands to generate brand classes?

easy

A. @each $brand, $colors in $brands { .#{$brand} { color: $colors.primary; } }

B. @for $brand, $colors in $brands { .#{$brand} { color: $colors.primary; } }

C. @while $brand, $colors in $brands { .#{$brand} { color: $colors.primary; } }

D. @map $brand, $colors in $brands { .#{$brand} { color: $colors.primary; } }

Solution

1. Step 1: Identify correct loop type for maps

   Sass uses @each to loop over maps with key and value variables.

2. Step 2: Check syntax correctness

   @each $brand, $colors in $brands { .#{$brand} { color: $colors.primary; } } uses @each $brand, $colors in $brands, which is correct syntax for maps.

3. Final Answer:

   @each $brand, $colors in $brands { .#{$brand} { color: $colors.primary; } } -> Option A

4. Quick Check:

   @each loops maps correctly [OK]

Hint: Use @each for looping over Sass maps [OK]

Common Mistakes:

• Using @for or @while for maps
• Writing @map which is invalid
• Missing interpolation for class names

3. Given this Sass code:

$brands: (red: (primary: #f00), blue: (primary: #00f));

@each $brand, $colors in $brands {
  .#{$brand} {
    --main-color: #{$colors.primary};
  }
}

What CSS is generated?

medium

A. .red { --main-color: #f00; } .blue { --main-color: #00f; }

B. .red { color: #f00; } .blue { color: #00f; }

C. .red { --main-color: red; } .blue { --main-color: blue; }

D. Syntax error, no CSS generated

Solution

1. Step 1: Understand the loop and map values

   The loop iterates over two brands: red and blue, each with a primary color hex code.

2. Step 2: Check generated CSS properties

   Each brand class sets a CSS variable --main-color to the brand's primary hex color.

3. Final Answer:

   .red { --main-color: #f00; } .blue { --main-color: #00f; } -> Option A

4. Quick Check:

   Loop sets CSS variables with brand colors [OK]

Hint: Sass loops create brand classes with CSS variables [OK]

Common Mistakes:

• Confusing CSS variable with color property
• Using color names instead of hex codes
• Expecting syntax error from valid code

4. Identify the error in this Sass snippet for multi-brand styles:

$brands: (green: (primary: #0f0));

@each $brand, $colors in $brands {
  .#{$brand} {
    color: $colors-primary;
  }
}

medium

A. Missing semicolon after $brands map declaration.

B. Incorrect variable access syntax: should use $colors.primary instead of $colors-primary.

C. Wrong loop directive: should use @for instead of @each.

D. Class name interpolation is invalid without quotes.

Solution

1. Step 1: Check variable access inside map

   Accessing nested map values requires dot notation: $colors.primary, not dash.

2. Step 2: Verify other syntax parts

   Semicolon after map is optional in Sass; @each is correct for maps; interpolation without quotes is valid.

3. Final Answer:

   Incorrect variable access syntax: should use $colors.primary instead of $colors-primary. -> Option B

4. Quick Check:

   Use dot notation for nested map keys [OK]

Hint: Use dot, not dash, to access nested map keys [OK]

Common Mistakes:

• Using dash instead of dot for map keys
• Confusing @for and @each loops
• Thinking semicolon is mandatory after maps

5. You want to generate brand-specific buttons with background colors from a Sass map $brands. Which approach best ensures easy future updates and supports CSS variable overrides?

hard

A. Create separate CSS files for each brand manually.

B. Hardcode background colors directly in button classes without variables or loops.

C. Define CSS variables inside each brand class using Sass loops, then use those variables in button styles.

D. Use JavaScript to change button colors instead of Sass.

Solution

1. Step 1: Understand maintainability needs

   Using CSS variables inside brand classes allows easy color changes without rewriting styles.

2. Step 2: Use Sass loops to generate variables

   Loops automate creating brand classes with variables, making updates simple and consistent.

3. Step 3: Apply variables in button styles

   Buttons use the CSS variables, so changing the variable updates all buttons for that brand.

4. Final Answer:

   Define CSS variables inside each brand class using Sass loops, then use those variables in button styles. -> Option C

5. Quick Check:

   CSS variables + Sass loops = flexible multi-brand styles [OK]

Hint: Use CSS variables with Sass loops for flexible brand styles [OK]

Common Mistakes:

• Hardcoding colors reduces flexibility
• Relying on JavaScript adds complexity
• Managing separate CSS files is error-prone