Bird
Raised Fist0
SASSmarkup~7 mins

Multi-brand stylesheet generation in SASS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Multi-brand stylesheet generation helps you create different looks for multiple brands using one set of styles. It saves time and keeps your code organized.

You have a website that supports several brands with different colors and fonts.
You want to maintain one codebase but generate separate stylesheets for each brand.
You need to quickly switch themes or update styles for multiple brands at once.
You want to avoid repeating the same CSS code for each brand.
You want consistent layout but different brand identities.
Syntax
SASS
$brands: (
  brand1: (
    primary-color: #ff0000,
    font-family: "Arial, sans-serif"
  ),
  brand2: (
    primary-color: #0000ff,
    font-family: "Georgia, serif"
  )
);

@each $brand, $settings in $brands {
  .#{$brand} {
    --primary-color: #{map-get($settings, primary-color)};
    font-family: #{map-get($settings, font-family)};
  }
}

Use $brands map to store brand-specific settings.

@each loop helps generate styles for each brand automatically.

Examples
This example creates two brand classes with different text colors and fonts.
SASS
$brands: (
  redbrand: (
    primary-color: #e63946,
    font-family: "Helvetica, sans-serif"
  ),
  bluebrand: (
    primary-color: #1d3557,
    font-family: "Times New Roman, serif"
  )
);

@each $brand, $settings in $brands {
  .#{$brand} {
    color: map-get($settings, primary-color);
    font-family: map-get($settings, font-family);
  }
}
Here, each brand gets a different background color using the map values.
SASS
$brands: (
  brandA: (
    primary-color: #2a9d8f
  ),
  brandB: (
    primary-color: #e76f51
  )
);

@each $brand, $settings in $brands {
  .#{$brand} {
    background-color: map-get($settings, primary-color);
  }
}
Sample Program

This HTML file uses Sass to generate styles for two brands: Alpha and Beta. Each brand section has its own color and font style. The styles are applied using CSS custom properties and Sass maps with loops.

Note: Sass code must be compiled to CSS before it can be used in the browser. The Sass code shown in the original example should be placed in a separate .scss file and compiled to CSS, which is then linked or included in the HTML.

SASS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Multi-brand Stylesheet Example</title>
  <style>
    /* Sass code cannot be used directly inside <style> tags in HTML. It needs to be compiled to CSS first. */
  </style>
</head>
<body>
  <section class="alpha">
    <h1>Alpha Brand</h1>
    <p>This section uses Alpha brand colors and fonts.</p>
  </section>
  <section class="beta">
    <h1>Beta Brand</h1>
    <p>This section uses Beta brand colors and fonts.</p>
  </section>
</body>
</html>
OutputSuccess
Important Notes

Remember to compile Sass to CSS before using it in the browser.

Use CSS custom properties for easier theme switching in runtime.

Keep brand variables organized in maps for easy updates.

Summary

Multi-brand stylesheets let you style many brands from one codebase.

Sass maps and loops help generate brand-specific CSS automatically.

Use CSS variables for flexible and maintainable brand styles.

Practice

(1/5)
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