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.