Multi-brand stylesheet generation in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Sass Variables for Multi-brand Colors

You want to create a Sass stylesheet that supports multiple brands by defining color variables for each brand. Which Sass code snippet correctly defines color variables for two brands, 'brandA' and 'brandB', so you can use them later in your styles?

A

$brandA-colors: (primary: #ff0000, secondary: #00ff00);
$brandB-colors: (primary: #0000ff, secondary: #ffff00);

B $brand-colors: (brandA: #ff0000, brandB: #0000ff);

C $colors: brandA: #ff0000, brandB: #0000ff;

D

$brandA-primary: #ff0000;
$brandB-primary: #0000ff;
$brandA-secondary: #00ff00;
$brandB-secondary: #ffff00;

💡 Hint

Think about how Sass maps (dictionaries) are defined and used for grouping related variables.

Option A correctly uses Sass maps to group colors for each brand, allowing easy access like map-get($brandA-colors, primary). Option A defines separate variables but does not group them, making management harder. Options A and C use invalid syntax for Sass maps.

📝 Syntax

intermediate

Correct Sass Syntax for Brand Color Usage

Given the Sass map $brandA-colors: (primary: #ff0000, secondary: #00ff00);, which option correctly uses map-get to set the background color to the primary brand color?

A background-color: $brandA-colors.primary;

B background-color: map-get(primary, $brandA-colors);

C background-color: $brandA-colors[primary];

D background-color: map-get($brandA-colors, primary);

💡 Hint

Remember the order of arguments in map-get is the map first, then the key.

Option D correctly calls map-get with the map variable first and the key second. Options A, B, and D use incorrect syntax or invalid Sass map access methods.

❓ rendering

advanced

Output CSS for Multi-brand Button Styles

Given this Sass code, what is the rendered CSS output?

$brandA-colors: (primary: #ff0000, secondary: #00ff00);
$brandB-colors: (primary: #0000ff, secondary: #ffff00);

@mixin brand-button($brand-colors) {
  background-color: map-get($brand-colors, primary);
  border: 2px solid map-get($brand-colors, secondary);
  color: white;
}

.button-brandA {
  @include brand-button($brandA-colors);
}

.button-brandB {
  @include brand-button($brandB-colors);
}

SASS

$brandA-colors: (primary: #ff0000, secondary: #00ff00);
$brandB-colors: (primary: #0000ff, secondary: #ffff00);

@mixin brand-button($brand-colors) {
  background-color: map-get($brand-colors, primary);
  border: 2px solid map-get($brand-colors, secondary);
  color: white;
}

.button-brandA {
  @include brand-button($brandA-colors);
}

.button-brandB {
  @include brand-button($brandB-colors);
}

A

.button-brandA {
  background-color: #ff0000;
  border: 2px solid #00ff00;
  color: white;
}

.button-brandB {
  background-color: #0000ff;
  border: 2px solid #ffff00;
  color: white;
}

B

.button-brandA {
  background-color: map-get($brandA-colors, primary);
  border: 2px solid map-get($brandA-colors, secondary);
  color: white;
}

.button-brandB {
  background-color: map-get($brandB-colors, primary);
  border: 2px solid map-get($brandB-colors, secondary);
  color: white;
}

C

.button-brandA {
  background-color: #00ff00;
  border: 2px solid #ff0000;
  color: white;
}

.button-brandB {
  background-color: #ffff00;
  border: 2px solid #0000ff;
  color: white;
}

D

.button-brandA {
  background-color: #ff0000;
  border: 2px solid #0000ff;
  color: white;
}

.button-brandB {
  background-color: #0000ff;
  border: 2px solid #00ff00;
  color: white;
}

💡 Hint

Check how map-get accesses the primary and secondary colors for each brand.

Option A shows the correct CSS output with the primary color as background and secondary color as border for each brand. Option A shows Sass code, not compiled CSS. Options C and D swap colors incorrectly.

❓ selector

advanced

Sass Nested Selectors for Brand-specific Styles

You want to write Sass that applies brand-specific styles inside a common .button class using nested selectors for two brands: .brandA and .brandB. Which option correctly nests the selectors to apply different background colors for each brand?

A

.brandA {
  .button {
    background-color: #ff0000;
  }
}
.brandB {
  .button {
    background-color: #0000ff;
  }
}

B

.button {
  .brandA & {
    background-color: #ff0000;
  }
  .brandB & {
    background-color: #0000ff;
  }
}

C

.button {
  &.brandA {
    background-color: #ff0000;
  }
  &.brandB {
    background-color: #0000ff;
  }
}

D

.button {
  .brandA {
    background-color: #ff0000;
  }
  .brandB {
    background-color: #0000ff;
  }
}

💡 Hint

Use the ampersand (&) to refer to the parent selector when nesting.

Option C correctly nests .brandA and .brandB as modifiers of .button using &.brandA and &.brandB. Option C reverses the order, targeting elements inside .brandA which is different. Option C and D create separate selectors or nested classes incorrectly.

❓ accessibility

expert

Ensuring Accessible Color Contrast in Multi-brand Stylesheets

You have multiple brand color palettes in Sass. To ensure accessibility, you want to check if the text color on brand backgrounds meets WCAG contrast standards. Which approach best helps you automate this check in your Sass workflow?

A Manually test each brand color combination in the browser and adjust colors by trial and error.

B Use a Sass function that calculates contrast ratio between two colors and conditionally sets text color to black or white based on the ratio.

C Use CSS variables only and rely on browser defaults for color contrast.

D Set all text colors to white regardless of background color to keep it consistent.

💡 Hint

Think about how Sass can help calculate values and make decisions during compilation.

Option B uses Sass functions to calculate contrast ratios and conditionally set text colors, automating accessibility checks. Option B is manual and inefficient. Option B ignores contrast needs. Option B risks poor contrast on light backgrounds.

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