Why variables reduce repetition in SASS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a color variable in Sass.

SASS

$primary-color: [1];

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

Ablue

Bcolor

Cprimary

D#3498db

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name instead of a color value.

Forgetting the semicolon at the end.

In Sass, variables start with $. Here, $primary-color is set to a hex color code #3498db.

2fill in blank

medium

Complete the code to use the variable $primary-color for the background color.

SASS

button {
  background-color: [1];
}

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

A$primary-color

Bprimary-color

Ccolor-primary

D#primary-color

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the $ sign.

Adding extra characters like # before the variable.

To use a Sass variable, include the $ sign before the variable name.

3fill in blank

hard

Fix the error in the code to correctly use the variable for font color.

SASS

p {
  color: [1];
}

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

A$primary-color

B#primary-color

Cprimary-color

DprimaryColor

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names without $.

Using camelCase instead of kebab-case.

Variables in Sass must be referenced with the $ sign. Without it, Sass treats it as a plain string.

4fill in blank

hard

Fill both blanks to create a variable and use it for border color.

SASS

[1]: #e74c3c;
.box {
  border: 2px solid [2];
}

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

A$alert-color

B$border-color

D#alert-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names for definition and usage.

Omitting the $ sign in either place.

First, define the variable $alert-color with the color value. Then use the same variable name to set the border color.

5fill in blank

hard

Fill all three blanks to define variables and use them for background and text colors.

SASS

[1]: #2ecc71;
[2]: #ffffff;
.card {
  background-color: [3];
  color: $text-color;
}

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

A$bg-color

B$text-color

D$background

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing variable names or misspelling them.

Forgetting the $ sign.

Define $bg-color and $text-color variables. Then use $bg-color for the background color and $text-color for the text color.