Null value behavior in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

How does Sass treat null values in property assignments?

Consider the following Sass code snippet:

$color: null;

.box {
  background-color: $color;
  border: 1px solid black;
}

What will be the output CSS for the .box selector?

SASS

$color: null;

.box {
  background-color: $color;
  border: 1px solid black;
}

A

.box {
  background-color: transparent;
  border: 1px solid black;
}

B

.box {
  background-color: ;
  border: 1px solid black;
}

C

.box {
  border: 1px solid black;
}

D

.box {
  background-color: null;
  border: 1px solid black;
}

💡 Hint

In Sass, null values cause the property to be omitted from the output CSS.

When a Sass variable is null and used as a property value, Sass does not output that property at all. So background-color: $color; is omitted because $color is null.

📝 Syntax

intermediate

What happens when you use null in a Sass list?

Given this Sass code:

$list: 10px null 20px;

.box {
  margin: $list;
}

What is the output CSS margin value?

SASS

$list: 10px null 20px;

.box {
  margin: $list;
}

A

.box {
  margin: 10px 0 20px;
}

B

.box {
  margin: 10px null 20px;
}

C

.box {
  margin: 10px 20px 20px;
}

D

.box {
  margin: 10px 20px;
}

💡 Hint

Null values in lists are removed when outputting CSS.

Sass removes null values from lists when outputting CSS. So the margin becomes 10px 20px skipping the null.

❓ rendering

advanced

What CSS is generated when a null value is used in a nested Sass map?

Consider this Sass code:

$settings: (
  color: null,
  padding: 1rem
);

.box {
  color: map-get($settings, color);
  padding: map-get($settings, padding);
}

What is the rendered CSS?

SASS

$settings: (
  color: null,
  padding: 1rem
);

.box {
  color: map-get($settings, color);
  padding: map-get($settings, padding);
}

A

.box {
  color: null;
  padding: 1rem;
}

B

.box {
  padding: 1rem;
}

C

.box {
  color: ;
  padding: 1rem;
}

D

.box {
  color: transparent;
  padding: 1rem;
}

💡 Hint

Null values in Sass cause the property to be omitted from the output CSS.

Since color is null, Sass omits the color property entirely. Only padding is output.

❓ selector

advanced

How does Sass handle null in selector interpolation?

What is the output CSS of this Sass code?

$name: null;

.#{$name} {
  color: red;
}

SASS

$name: null;

.#{$name} {
  color: red;
}

A

. {
  color: red;
}

B

.null {
  color: red;
}

C

{
  color: red;
}

D SyntaxError

💡 Hint

Null interpolated in selectors becomes an empty string.

When null is interpolated in a selector, it becomes an empty string. So the selector is just a dot . which is invalid CSS but Sass outputs it as is.

❓ accessibility

expert

How does null affect ARIA attribute assignment in Sass?

Given this Sass code:

$aria-label: null;

.button {
  aria-label: $aria-label;
  background: blue;
}

What is the output CSS and what is the accessibility implication?

SASS

$aria-label: null;

.button {
  aria-label: $aria-label;
  background: blue;
}

A

.button {
  background: blue;
}

/* No aria-label attribute output, so no accessibility label */

B

.button {
  aria-label: null;
  background: blue;
}

/* aria-label attribute with 'null' string, confusing screen readers */

C

.button {
  aria-label: '';
  background: blue;
}

/* Empty aria-label, which may cause accessibility issues */

D SyntaxError

💡 Hint

Null values cause properties to be omitted, so no aria-label CSS property is output.

Since $aria-label is null, Sass omits the aria-label property. This means no CSS attribute is set, so accessibility depends on HTML attributes, not CSS. Setting aria-label in CSS is unusual and may not work as expected.

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