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
filter_nonebrightness_4
*
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
filter_nonebrightness_4
*{
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 #web technologies #sass
