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
);

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

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

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

Hint

Use the variables inside the body CSS block.

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