¿Cómo establecer una variable para que no sea igual a nada en SASS?

Una variable es como un contenedor donde podemos almacenar algunos datos y luego reutilizarlos en nuestro código. Por lo tanto, uno puede definirlo una vez y luego reutilizarlo en todas partes. El valor de la variable se puede cambiar en cualquier momento en el código y tendrá efecto en todas partes cuando se use a continuación.

Puede haber una situación en la que tengamos que declarar una variable en SASS que sea igual a nada. Esto se puede hacer de dos formas:

• La variable se puede declarar poniendo su valor como “nulo”. La ventaja de usar «null» es que desaparecerá por completo en el CSS compilado cuando se use con una propiedad.
• La variable también se puede declarar poniendo su valor como “falso”. Este tipo de valor no tiene significado y, por lo tanto, no afectaría la propiedad.

Los siguientes ejemplos demuestran este enfoque:

Código 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>

Archivo SASS para la variable con valor “nulo”: Aquí a la variable denominada color se le asigna el valor “nulo”. Luego se pasa a una propiedad.

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

Salida: este es el archivo CSS compilado con la variable que tiene un valor nulo. La variable que contenía el valor nulo desaparece en el archivo final, por lo que no tiene impacto en la salida.

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

Archivo SASS para la variable con valor “falso”: Aquí a la variable denominada color se le asigna el valor “falso”. Luego se pasa a una propiedad.

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

Salida: este es el archivo CSS compilado con la variable que tiene un valor falso. Aquí, el valor de la variable llamada color en realidad aparece en la propiedad designada, pero como el valor no es adecuado, no afecta la salida.

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