Null value behavior in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to assign a null value to the variable.

SASS

$color: [1];

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

Aempty

Bnone

Cundefined

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'none' instead of 'null' which is not valid in Sass.

Using 'empty' or 'undefined' which are not recognized Sass values.

In Sass, null is used to represent the absence of a value.

2fill in blank

medium

Complete the code to check if a variable is null using the correct Sass function.

SASS

@if [1]($value) == null {
  color: red;
}

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

Atype-of

Bnull?

CisNull

Disnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using camelCase or question mark suffix which Sass does not support.

Using incorrect function names like 'isNull' or 'null?'.

In Sass, type-of($value) == null is used to check if a value is null.

3fill in blank

hard

Fix the error in the code to properly assign a fallback color if $primary-color is null.

SASS

$final-color: if([1]($primary-color) == null, blue, $primary-color);

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

Atype-of

Bisnull

Cnull?

DisNull

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect function names causes errors or unexpected behavior.

Not checking for null properly leads to wrong fallback assignment.

The if() function uses type-of($primary-color) == null to check if $primary-color is null.

4fill in blank

hard

Fill both blanks to create a map that excludes keys with null values.

SASS

$map: (
  key1: value1,
  key2: [1],
  key3: value3
);

$filtered-map: map-remove($map, [2]);

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

Anull

Bkey2

Ckey1

Dvalue2

Attempts:

3 left

💡 Hint

Common Mistakes

Using a value instead of null for the key.

Removing the wrong key from the map.

Assign null to key2 and remove key2 from the map using map-remove().

5fill in blank

hard

Fill all three blanks to create a function that returns a default value if input is null.

SASS

@function default-if-null($input, $default) {
  @return if([1]($input) == null, [2], $input);
}

$result: default-if-null(null, [3]);

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

Atype-of

B$default

Cred

Disnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect function names for null check.

Returning the wrong variable instead of the default.

Not passing a valid default value.

The function uses type-of($input) == null to check if $input is null, returns $default if true, otherwise returns $input. The example uses red as the default.