What is Multi-brand stylesheet generation in SASS?

SASSmarkup~7 mins

Multi-brand stylesheet generation in SASS

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.