Null value behavior in SASS - Mini Project: Build & Apply

Understanding Null Value Behavior in Sass

📖 Scenario: You are creating a simple style sheet for a website. You want to learn how Sass handles null values when setting variables and using them in styles.

🎯 Goal: Build a Sass file that defines variables with null values, uses conditional logic to check for null, and applies styles accordingly.

📋 What You'll Learn

Create a Sass variable with a null value

Create a helper variable to check if the first variable is null

Use an @if statement to apply a style only if the variable is not null

Add a CSS rule that uses the variable or a fallback value

💡 Why This Matters

🌍 Real World

Handling null values in Sass helps you write flexible styles that adapt based on whether variables are set or not, useful in theming and design systems.

💼 Career

Understanding null behavior in Sass is important for front-end developers working with CSS preprocessors to create maintainable and dynamic stylesheets.

1

Create a Sass variable with a null value

Create a Sass variable called $primary-color and set it to null.

SASS

# Create a Sass variable called $primary-color and set it to null
# Your code here

Need a hint?

Use $primary-color: null; to assign a null value.

2

Create a helper variable to check for null

Create a Sass variable called $has-primary-color and set it to the result of checking if $primary-color is not null using if($primary-color != null, true, false).

SASS

$primary-color: null;
# Create a variable $has-primary-color that is true if $primary-color is not null, otherwise false
# Your code here

Need a hint?

Use the if() function to check if $primary-color is not null.

3

Use @if to apply style only if variable is not null

Write an @if statement that checks if $has-primary-color is true, and inside it set the CSS selector .button to have background-color: $primary-color;.

SASS

$primary-color: null;
$has-primary-color: if($primary-color != null, true, false);
# Use @if to apply background-color to .button only if $has-primary-color is true
# Your code here

Need a hint?

Use @if $has-primary-color { .button { background-color: $primary-color; } } to conditionally apply the style.

4

Add a CSS rule with fallback color

Add a CSS rule for the selector .button that sets color to $primary-color if it is not null, otherwise use #000000 as fallback using the if() function.

SASS

$primary-color: null;
$has-primary-color: if($primary-color != null, true, false);
@if $has-primary-color {
  .button {
    background-color: $primary-color;
  }
}
# Add a color property to .button with fallback using if() function
# Your code here

Need a hint?

Use color: if($primary-color != null, $primary-color, #000000); inside .button.