Multi-brand stylesheet generation in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a variable for the primary color.

SASS

$primary-color: [1];

Drag options to blanks, or click blank then click option'

Acolor-primary

B#ff5733

Cprimary-color

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name instead of a color value.

Omitting the # in the hex color.

The variable $primary-color should be assigned a valid color value like #ff5733.

2fill in blank

medium

Complete the mixin to accept a brand name parameter.

SASS

@mixin brand-colors($[1]) { color: map-get($colors, $[1]); }

Drag options to blanks, or click blank then click option'

Atheme

Bcolor

Cname

Dbrand

Attempts:

3 left

💡 Hint

Common Mistakes

Using unrelated parameter names like $color or $theme.

Forgetting the $ sign before the parameter.

The mixin parameter should be $brand to represent the brand name.

3fill in blank

hard

Fix the error in the map-get function to retrieve the brand color.

SASS

$brand-color: map-get($colors, [1]);

Drag options to blanks, or click blank then click option'

A$brand

B$brand-color

Cbrand

Dcolors

Attempts:

3 left

💡 Hint

Common Mistakes

Using the color variable instead of the brand key.

Using a string without $ sign.

The second argument to map-get should be the variable $brand representing the brand key.

4fill in blank

hard

Fill both blanks to create a map of brand colors and use it in a class.

SASS

$colors: ([1]: #3498db, [2]: #e74c3c);

.brand-[1] { color: map-get($colors, [1]); }

Drag options to blanks, or click blank then click option'

Ablue

Bred

Cgreen

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using color names not matching the map keys.

Mismatching class name and map key.

The map keys are brand names like blue and red. The class uses blue to get the color.

5fill in blank

hard

Fill all three blanks to generate brand-specific background and text colors.

SASS

@mixin brand-style($[1]) {
  background-color: map-get($colors, $[2]);
  color: map-get($text-colors, $[3]);
}

Drag options to blanks, or click blank then click option'

Abrand

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names for each blank.

Using unrelated variable names like $color.

All blanks should be brand to use the same brand key for colors.

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