Component variant generation in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a base button style using a SASS variable.

SASS

$btn-color: [1];
.button {
  background-color: $btn-color;
  color: white;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
}

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

Ared

Bblue

C#3498db

Dgreen

Attempts:

3 left

💡 Hint

Common Mistakes

Using color names instead of hex codes when hex is expected.

Forgetting the $ sign for variables.

The variable $btn-color is set to a hex color #3498db, which is a blue shade. This color is used as the background for the button.

2fill in blank

medium

Complete the code to create a SASS mixin for button variants.

SASS

@mixin button-variant($color) {
  background-color: [1];
  border: 2px solid $color;
  color: white;
}

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

Abtn-color

Bcolor

Cbackground-color

D$color

Attempts:

3 left

💡 Hint

Common Mistakes

Using the parameter name without the $ sign.

Using unrelated variable names.

The mixin uses the parameter $color to set the background color dynamically. Variables in SASS start with a $.

3fill in blank

hard

Fix the error in the code to generate button variants using the mixin.

SASS

.btn-primary {
  @include button-variant([1]);
}

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

A$primary-color

Bprimary-color

CprimaryColor

Dprimary_color

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the $ sign before the variable name.

Using camelCase or underscores incorrectly.

When passing a variable to a mixin, you must use the variable name with the $ prefix, like $primary-color.

4fill in blank

hard

Fill both blanks to create a map of button variants and loop through them to generate styles.

SASS

$btn-variants: (
  primary: [1],
  secondary: [2]
);

@each $name, $color in $btn-variants {
  .btn-#{$name} {
    @include button-variant($color);
  }
}

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

A$primary-color

B$secondary-color

Cprimary-color

Dsecondary-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names without $ in the map values.

Mixing keys and values incorrectly.

The map keys are variant names, and the values are variables holding colors. Variables must have the $ prefix.

5fill in blank

hard

Fill all three blanks to create a function that returns a color for a variant and use it in a style.

SASS

@function get-variant-color($variant) {
  @return map-get($btn-variants, [1]);
}

.btn-alert {
  background-color: get-variant-color([2]);
  border-color: [3];
}

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

A$variant

Balert

C$alert-color

Dalert-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variant name without quotes in the function call.

Using variable names without $ where needed.

The function uses the parameter $variant to get the color from the map. The class uses the string alert to get the color. The border color uses the variable $alert-color.