SASS | valor variable negativo

Las variables SASS son bastante útiles para escribir código de estilo mantenible para páginas web. A menudo, requerimos que diferentes componentes de una página tengan el mismo valor para una propiedad estilística. En tal escenario, asignar el valor a una variable y usarlo donde sea necesario reduce la cantidad de esfuerzo necesario para realizar cambios en el estilo en el futuro. A veces también podemos requerir la negación del valor de una variable para una propiedad. Por ejemplo, considere el código SASS que se proporciona a continuación:

$marg: 20px;
  
#div1 {
    margin: 0 20px 0 -20px;
}

Los valores de propiedad 20pxy -20pxse pueden sustituir con la variable $marg. La forma obvia de hacerlo sería:

$marg: 20px;
  
#div1 {
    margin: 0 $marg 0 -$marg;
}

Sin embargo, en la compilación, esto genera el siguiente css:

$marg: 20px;
  
#div1 {
    margin: 0 20px -20px;
}

Esto se debe a que el compilador SASS trata 0 -$margcomo una operación de resta y genera -20px. Por lo tanto, cada vez que deseemos usar la negación de una variable, podría generar un CSS de salida no deseado, ya que el compilador de SASS podría confundir la intención con una sustracción binaria.

Ahora bien, existen múltiples formas de resolver este problema.

1. Uso de paréntesis: encerrar la variable entre paréntesis evitará que el compilador realice la resta.

   $marg: 20px;    #div1 {     margin: 0 $marg 0 (-$marg); }

2. Realizar la multiplicación con un número negativo: simplemente multiplicando la variable con -1 generará su negación, conservando sus unidades originales.

   $marg: 20px;    #div1 {     margin: 0 $marg 0 -1*$marg; }

3. Uso de la interpolación: la interpolación de un valor lo convierte en una string sin comillas. Se puede utilizar para obtener la negación del valor de una variable. Sin embargo, esto no se recomienda ya que la string sin comillas en el CSS de salida se verá como un número, pero no funcionará con funciones y operadores numéricos, lo que puede conducir a un código engañoso.

   $marg: 20px;    #div1 {     margin: 0 $marg 0 -#{$marg}; }

En todos los enfoques anteriores, se obtiene el siguiente CSS en la compilación:

#div1 {
    margin: 0 20px 0 -20px;
}

De esta forma, podemos utilizar una variable SASS para casos de uso tanto positivos como negativos, promoviendo así la reutilización de variables y un código más fácil de mantener.