Multi-brand stylesheet generation in SASS - Mini Project: Build & Apply

Multi-brand Stylesheet Generation with Sass

📖 Scenario: You are working for a company that manages multiple brands. Each brand has its own colors and fonts. You want to create a single Sass stylesheet that can generate CSS for each brand easily by changing just one variable.

🎯 Goal: Create a Sass stylesheet that defines brand colors and fonts in a map, sets a variable to select the current brand, and uses Sass features to generate CSS styles for the selected brand.

📋 What You'll Learn

Create a Sass map called $brands with three brands: brandA, brandB, and brandC.

Each brand must have a primary-color and a font-family.

Create a variable called $current-brand and set it to brandB.

Use the map-get() function to get the current brand's colors and fonts.

Write CSS rules for the body that use the current brand's primary-color as background and font-family for text.

💡 Why This Matters

🌍 Real World

Companies often manage multiple brands and need a flexible way to maintain consistent styles for each brand in one stylesheet.

💼 Career

Knowing how to use Sass maps and variables to generate multi-brand stylesheets is valuable for front-end developers working in agencies or companies with multiple product lines.

1

Create the brands map

Create a Sass map called $brands with these exact entries: brandA with primary-color: #ff0000 and font-family: 'Arial, sans-serif', brandB with primary-color: #00ff00 and font-family: 'Helvetica, sans-serif', and brandC with primary-color: #0000ff and font-family: 'Times New Roman, serif'.

SASS

$brands: (
  // Define brandA, brandB, and brandC with colors and fonts here
);

Need a hint?

Use nested maps inside $brands for each brand's colors and fonts.

2

Set the current brand variable

Create a variable called $current-brand and set it to brandB.

SASS

$brands: (
  brandA: (
    primary-color: #ff0000,
    font-family: 'Arial, sans-serif'
  ),
  brandB: (
    primary-color: #00ff00,
    font-family: 'Helvetica, sans-serif'
  ),
  brandC: (
    primary-color: #0000ff,
    font-family: 'Times New Roman, serif'
  )
);

// Set the current brand here

Need a hint?

Just assign brandB to $current-brand.

3

Get current brand colors and fonts

Create two variables: $primary-color and $font-family. Use map-get() to get the primary-color and font-family from the $brands map for the $current-brand.

SASS

$brands: (
  brandA: (
    primary-color: #ff0000,
    font-family: 'Arial, sans-serif'
  ),
  brandB: (
    primary-color: #00ff00,
    font-family: 'Helvetica, sans-serif'
  ),
  brandC: (
    primary-color: #0000ff,
    font-family: 'Times New Roman, serif'
  )
);

$current-brand: brandB;

// Get primary color and font family for current brand

Need a hint?

Use map-get($brands, $current-brand) to get the brand map, then get primary-color and font-family.

4

Write CSS rules for body using brand styles

Write CSS rules for the body selector that set background-color to $primary-color and font-family to $font-family.

SASS

$brands: (
  brandA: (
    primary-color: #ff0000,
    font-family: 'Arial, sans-serif'
  ),
  brandB: (
    primary-color: #00ff00,
    font-family: 'Helvetica, sans-serif'
  ),
  brandC: (
    primary-color: #0000ff,
    font-family: 'Times New Roman, serif'
  )
);

$current-brand: brandB;

$primary-color: map-get(map-get($brands, $current-brand), primary-color);
$font-family: map-get(map-get($brands, $current-brand), font-family);

// Write CSS for body using $primary-color and $font-family

Need a hint?

Use the variables inside the body CSS block.