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.

Practice

1. What does null represent in Sass?

easy

A. A zero number

B. A false boolean

C. An empty string

D. No value or absence of a value

Solution

1. Step 1: Understand Sass null meaning

   In Sass, null means no value is assigned, like an empty box.

2. Step 2: Differentiate from other values

   Zero, empty string, and false are actual values, but null means nothing is there.

3. Final Answer:

   No value or absence of a value -> Option D

4. Quick Check:

   Null = no value [OK]

Hint: Null means no value, not zero or empty [OK]

Common Mistakes:

• Confusing null with zero
• Thinking null is an empty string
• Assuming null is false

2. Which Sass syntax correctly checks if a variable $color is not null?

easy

A. @if $color = null { color: $color; }

B. @if $color != null { color: $color; }

C. @if $color == false { color: $color; }

D. @if $color !== null { color: $color; }

Solution

1. Step 1: Identify correct comparison operator

   Sass uses != to check if a value is not equal to another.

2. Step 2: Check syntax correctness

   @if $color != null { ... } is valid. = is assignment, not comparison. !== is not valid Sass syntax.

3. Final Answer:

   @if $color != null { color: $color; } -> Option B

4. Quick Check:

   Use != to check not null [OK]

Hint: Use != to check not null in Sass [OK]

Common Mistakes:

• Using = instead of != for comparison
• Using JavaScript-style !== which Sass doesn't support
• Checking against false instead of null

3. What CSS output results from this Sass code?

$bg: null;

.box {
  background-color: $bg;
  color: black;
}

medium

A. .box { background-color: null; color: black; }

B. No CSS output

C. .box { color: black; }

D. .box { background-color: ; color: black; }

Solution

1. Step 1: Understand null property behavior

   When a property value is null, Sass omits that property from output.

2. Step 2: Check which properties remain

   background-color: $bg; is omitted because $bg is null. color: black; remains.

3. Final Answer:

   .box { color: black; } -> Option C

4. Quick Check:

   Null property omitted in CSS [OK]

Hint: Null values skip CSS property output [OK]

Common Mistakes:

• Expecting null to output as 'null'
• Leaving empty property value in CSS
• Thinking no CSS is generated at all

4. Identify the error in this Sass code snippet:

$padding: null;

.container {
  padding: $padding;
  @if $padding != null {
    border: 1px solid black;
  }
}

medium

A. No error; code works as expected

B. The @if condition is incorrect syntax

C. The border property will never output

D. The padding property outputs with null value

Solution

1. Step 1: Check property with null value

   padding: $padding; tries to output padding with null, which Sass omits from CSS.

2. Step 2: Analyze condition logic

   The @if $padding != null is false because $padding is null, so border is not added.

3. Step 3: Verify for errors

   There is no syntax error or runtime issue. The code behaves as expected: no padding property and no border.

4. Final Answer:

   No error; code works as expected -> Option A

5. Quick Check:

   Null omits property, @if skips block correctly [OK]

Hint: Null property outputs nothing, check for missing styles [OK]

Common Mistakes:

• Thinking @if syntax is wrong
• Assuming border will output when padding is null
• Expecting padding to output as empty

5. Given this Sass code, what will be the final CSS output?

$margin: null;
$padding: 1rem;

.box {
  margin: $margin;
  padding: $padding;
  @if $margin != null {
    border: 1px solid black;
  }
  @if $padding != null {
    background-color: lightgray;
  }
}

hard

A. .box { padding: 1rem; background-color: lightgray; }

B. .box { margin: null; padding: 1rem; border: 1px solid black; background-color: lightgray; }

C. .box { padding: 1rem; border: 1px solid black; background-color: lightgray; }

D. .box { margin: 0; padding: 1rem; background-color: lightgray; }

Solution

1. Step 1: Check properties with null values

   margin: $margin; is null, so omitted. padding: 1rem; outputs normally.

2. Step 2: Evaluate conditional blocks

   @if $margin != null is false, so border is skipped. @if $padding != null is true, so background-color outputs.

3. Final Answer:

   .box { padding: 1rem; background-color: lightgray; } -> Option A

4. Quick Check:

   Null skips margin and border, padding and background-color output [OK]

Hint: Null skips property and related styles in conditions [OK]

Common Mistakes:

• Expecting margin or border to output
• Confusing null with zero or empty
• Missing that background-color outputs