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.