Open In App

How to set a Variable to equal nothing in SASS?

Improve
Improve
Like Article
Like
Save
Share
Report

A variable is like a container where we can store some data and then reuse it later in our code. Therefore, one can define it once and then reuse it everywhere. The value of the variable can be changed any time in the code and it would take effect everywhere when it is used next.

There may be a situation when we have to declare a variable in SASS that equals to nothing. This can be done in two ways:

  • The variable can be declared by putting its value as “null”. The advantage of using “null” is that it will disappear completely in the compiled CSS when used with a property.
  • The variable can also be declared by putting its value as a “false”. This type of value has no meaning and hence would not impact the property.

The below examples demonstrate this approach:

HTML Code:

HTML




<nav>
  <ul class="navigation">
     <li><a href="#">About us </a></li>
     <li><a href="#">blogs </a></li>
     <li><a href="#">contact </a></li>
  </ul>
  <div class="button">
    <a class="btn-main" href="#">Sign up</a>
    <a class="btn-hot" href="#">log in</a>
  </div>
</nav>


SASS file for the variable with a “null” value: Here the variable named color is given the value of “null”. It is then passed to a property.

CSS




*
  margin:0
  padding:0
  
$color: null
  
nav
  margin:30px
  background-color: $color


Output: This is the compiled CSS file with the variable having a null value. The variable that was holding the null value disappears in the final file, hence having no impact on the output.

CSS




*{
  margin: 0;
  padding: 0;
}
  
  
nav {
  margin: 30px;
}


SASS file for the variable with a “false” value: Here the variable named color is given the value of “false”. It is then passed to a property.

CSS




*
  margin:0
  padding:0
  
$color: false
  
nav
  margin:30px
  background-color: $color


Output: This is the compiled CSS file with the variable having a false value. Here, the value of the variable named color actually shows up in the designated property, but as the value is unsuitable, it does not impact the output.

CSS




* {
  margin: 0;
  padding: 0;
}
  
nav {
  margin: 30px;
  background-color: false;
}




Last Updated : 31 Jul, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads