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.