Skip to content
Related Articles

Related Articles

How to set a Variable to equal nothing in SASS?
  • Last Updated : 31 Jul, 2020

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


My Personal Notes arrow_drop_up
Recommended Articles
Page :