Why migration to modern SASS matters - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a variable in modern SASS.

SASS

$primary-color: [1];

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

A#3498db

Bprimary-color

Ccolor-primary

Dvar-primary

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names instead of color values

Missing the dollar sign in variable declaration

In modern SASS, variables start with a $ and are assigned values like colors directly. Here, #3498db is a valid color value.

2fill in blank

medium

Complete the code to use a variable inside a CSS rule in modern SASS.

SASS

button {
  background-color: [1];
}

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

A$primary-color

Bprimary-color

Cvar(primary-color)

D#primary-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using CSS variable syntax var()

Omitting the dollar sign

To use a SASS variable inside a rule, you write the variable name with the dollar sign, like $primary-color.

3fill in blank

hard

Fix the error in this nested selector using modern SASS syntax.

SASS

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  [1] {
    display: block;
  }
}

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

A.li

Bli

C& li

D#li

Attempts:

3 left

💡 Hint

Common Mistakes

Using plain li without &

Using class or ID selectors incorrectly

In modern SASS, to nest selectors that depend on the parent, use the ampersand &. Here, & li means nav li.

4fill in blank

hard

Fill both blanks to create a SASS map and access its value.

SASS

$colors: (primary: #3498db, secondary: #2ecc71);

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

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

Aprimary

B#3498db

Csecondary

D#2ecc71

Attempts:

3 left

💡 Hint

Common Mistakes

Using color values instead of keys in map-get

Mixing keys and values incorrectly

The map-get function retrieves the value for the key primary from the $colors map. The background color is then set to the color value #3498db.

5fill in blank

hard

Fill all three blanks to write a SASS function that darkens a color and use it.

SASS

@function [1]($color, $amount) {
  @return darken($color, $amount);
}

.alert {
  background-color: [2];
  border-color: [3];
}

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

Adarken-color

B$primary-color

Cdarken-color($primary-color, 10%)

D$alert-border

Attempts:

3 left

💡 Hint

Common Mistakes

Not defining the function name

Using variables without dollar sign

Not calling the function correctly

The function is named darken-color. The alert background uses the variable $primary-color. The border color uses the function call darken-color($primary-color, 10%) to darken the color by 10%.