Theming with mixins in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a mixin named theme-color that sets the background color.

SASS

@mixin [1]($color) {
  background-color: $color;
}

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

Atheme-color

Bcolor-theme

Cset-background

Dbg-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using a mixin name that doesn't clearly describe its purpose.

Forgetting the '@mixin' keyword.

The mixin is named theme-color to clearly indicate it sets a theme color.

2fill in blank

medium

Complete the code to include the theme-color mixin inside the .button class with a color variable.

SASS

.button {
  @include [1]($primary-color);
  color: white;
}

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

Atheme-color

Bset-background

Ccolor-theme

Dbg-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using '@mixin' instead of '@include' to apply the mixin.

Using the wrong mixin name.

Use '@include theme-color($primary-color);' to apply the mixin with the color variable.

3fill in blank

hard

Fix the error in the mixin call by completing the blank with the correct variable name for the secondary color.

SASS

.alert {
  @include theme-color([1]);
  color: black;
}

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

Asecondary-color

Bprimary-color

C$primary-color

D$secondary-color

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the '$' sign before the variable name.

Using the wrong variable name.

Variables in Sass start with '$', so use $secondary-color to pass the color variable.

4fill in blank

hard

Fill both blanks to create a mixin named theme-text that sets the text color and font size.

SASS

@mixin [1]($color, $size) {
  color: $color;
  font-size: [2];
}

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

Atheme-text

Btheme-color

C$size

D$font-size

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong mixin name.

Using an undefined variable for font size.

The mixin name is theme-text and the font size uses the variable $size.

5fill in blank

hard

Fill all three blanks to create a theme mixin that sets background color, text color, and border color.

SASS

@mixin [1]($bg, $text, $border) {
  background-color: [2];
  color: [3];
  border: 1px solid $border;
}

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

Atheme-style

B$bg

C$text

D$border

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up variable names for colors.

Forgetting to use the variables inside the mixin.

The mixin is named theme-style. Use $bg for background and $text for text color.