Sin importar el lenguaje de que hablemos, una variable es un valor guardado en memoria para su reutilización las veces que se requiera. Si bien las variables en SASS y CSS cumplen esta definición, el día de hoy te mostraré las diferencias que hay entre ambas.
Sintaxis y declaración
La primera y gran diferencia entre ambas variables es su sintaxis y declaración. Mientras que una variable de SASS se puede declarar en cualquier parte de nuestro archivo, las variables CSS deben estar encerradas en un bloque. Además de que en CSS se debe hacer uso de la función var() para poder utilizar variables.
CSS
body {
/* Declaración */
--color: red;
/* Usando la variable */
color: var(--color);
}
SASS
/* Declaración */
$color: red;
body {
/* Usando la variable */
color: $color;
}
Scope
Mientras que SASS maneja un scope por bloque, las variables en CSS lo hacen por medio del DOM, ¿qué quiere decir esto? Que las variables SASS sólo pueden ser usadas desde el momento de su declaración en forma descendente en una misma estructura, mientras que las variables de CSS siguen la jerarquía del HTML. Veamos un ejemplo con la siguiente estructura:
HTML
<p>
<a href="#">Hola, <span>Manuel</span></a>
</p>
CSS
p {
--color: blue;
--weight: bold;
}
a {
color: var(--color);
}
span {
font-weight: var(--weight);
}
SASS
p {
$color: blue;
$weight: bold;
a {
color: $color;
}
span {
font-weight: $bold;
}
}
Interpolación
Una gran desventaja que tienen las variables CSS es que sólo sirven para almacenar valores, es decir que no hay forma de interpolar una variable, caso contrario en SASS, que no sólo podemos guardar valores, sino el dato que deseemos e interporlar la variable. El uso más frecuente de esto es el de poder crear selectores con variables. Ejemplo:
SASS
$red: red;
// Compila a .container.red
.container.#{$red} {
color: $red;
}
Operaciones
Para realizar operaciones aritmétcas en SASS se hace como en cualquier otro lenguaje, mientras que en CSS necesitamos la función calc()
CSS
.container {
--height: 30px;
height: calc(var(--height) + 100px);
}
SASS
.container {
$height: 30px;
height: $height + 100px;
}
El inconveniente con las variables de SASS es que se debe tener la misma unidad de médida o no tener ninguna entre los valores que se utilizarán para la operación, por lo que en ocasiones tendremos que usar la función calc() y para esto es necesario interpolar la variable.
SASS
.container {
$height: 30px;
height: calc(#{$height} + 2rem);
}
Redefinir valor de variable
Un punto en contra a las variables de SASS es que no se pueden redifinir en ámbito de scope si su valor no es utilizado, mientras que las variables CSS sí pueden gracias a que se manejan por DOM
CSS
/* Valor por defecto de la variable */
body {
--color: red;
}
/* Todos los div tendrán un color: red */
div {
color: var(--color);
}
/* Todos los div que tengan la clase green tendrán un color: green sin necesdad de asignar el valor a la propiedad */
div.green {
--color: green;
}
SASS
// Valor por defecto de la variable
$color: red;
// Todos los div tendrán un color: red
div {
color: $red;
}
// El compilador de SASS ignorará este código porque la variable no se utiliza
div.green {
$color: green;
}
// El valor de la variable debe ser utilizado para que se compile
div.blue {
$color: blue;
color: $color;
}
En caso de querer asignarle el valor de una variable SASS a una CSS, es necesario interpolar
body {
$color: red;
--color : #{$color};
}
Compilación
Al final de cuenta SASS es un lenguaje que devulve CSS plano, por lo que al momento de compilar, todo respecto a SASS desparece, incluyendo las variables. Por otro lado, las variables en CSS están presentes en todo momento e inclusive se pueden acceder a ellas por JavaScript.
Conclusión
El objetivo de este artículo no es el de que utilices sólo un tipo de variables, sino el que conozcas ambos tipos de variables, sus ventajas, desvetajas y sepas emplearlas correctamente en las situaciones que lo ameriten.
Bonus
En EDteam contamos con un curso de Variables CSS totalmente gratuito donde aprenderás más al respecto del tema