Why SASS exists - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a variable in SASS.

SASS

$primary-color: [1];

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

Acolor

B#333

Cfont-size

Dbackground

Attempts:

3 left

💡 Hint

Common Mistakes

Using property names instead of values

Forgetting the dollar sign

In SASS, variables start with a $ and store values like colors. Here, #333 is a valid color value.

2fill in blank

medium

Complete the code to nest CSS selectors in SASS.

SASS

nav {
  ul {
    [1]: none;
  }
}

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

Alist-style

Bpadding

Cmargin

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Using margin or padding instead of list-style

Forgetting nesting syntax

Nesting selectors in SASS lets you write CSS inside CSS. Here, list-style: none; removes bullet points from lists.

3fill in blank

hard

Fix the error in the SASS code to correctly use a mixin.

SASS

@mixin border-radius($radius) {
  border-radius: [1];
}

.box {
  @include border-radius(10px);
}

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

Aborder-radius

Bradius

C10px

D$radius

Attempts:

3 left

💡 Hint

Common Mistakes

Using the value directly instead of the parameter

Omitting the dollar sign

Inside a mixin, use the parameter name with a dollar sign to apply the value passed in. Here, $radius is correct.

4fill in blank

hard

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

SASS

$colors: (primary: [1], secondary: [2]);

.button {
  color: map-get($colors, primary);
}

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

A#ff0000

B#00ff00

C#0000ff

D#ffff00

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same color for both keys

Forgetting the colon between key and value

A SASS map stores key-value pairs. Here, primary is #ff0000 (red) and secondary is #0000ff (blue).

5fill in blank

hard

Fill all three blanks to write a SASS function that doubles a number.

SASS

@function [1]($n) {
  @return $n [2] [3];
}

.box {
  width: double(5) * 1rem;
}

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

Adouble

B*

C2

D+

Attempts:

3 left

💡 Hint

Common Mistakes

Using addition instead of multiplication

Wrong function name

This function named double takes a number $n and returns it multiplied by 2.