Diferencias entre las variables CSS y SASS

Antes de comenzar asumo que si usted está aquí es porque cuenta con ciertas nociones sobre el SASS, si no tiene idea de lo que es este último, lo invito a consultar mi artículo Olvídese del CSS y adopte el SASS, el cual lo introducirá al lenguaje SASS. Además, en ese artículo conocerá algunas características muy útiles, principalmente las variables.

Si bien es posible crear variables en CSS, en esta ocasión explicaré las diferencias entre las variables que se crean en CSS y las que se crean en SASS.

Pero antes que nada, una pequeña aclaración: en CSS se habla de Custom Properties (propiedades personalizadas) y no de variables como tal.

Los Custom Properties en CSS

Para definir una propiedad personalizada, basta con establecer su nombre con un doble guión --, una vez definida esta propiedad, puede invocarla en su documento mediante la función var()

He aquí un pequeño ejemplo:

:root {
    --primaryColor: #0000FF;
}

form button {
    background-color: var(--primaryColor);
}

Aquí mi botón tendrá un background-color igual a #0000FF.

a/ El alcance de las propiedades personalizadas en CSS

Tenga en cuenta que he declarado mi propiedad en:root lo que significa que está disponible en todo mi documento. De haberlo declarado en otro lugar, habría cambiado su alcance.

#myForm1 {
    --primaryColor: #0000FF;
}

#myForm2 button {
    background-color: var(--primaryColor);
}

Aquí mi propiedad --primaryColor se declara en mi elemento #myForm1 (que no se encuentra en #myForm2). #myForm2 por lo tanto no puede recuperar esta propiedad. Esto es a lo que en programación llamamos scope o alcance si así lo prefiere.

b/ Propiedades personalizadas en Javascript

¡Otro punto muy interesante de las propiedades personalizadas es que estas pueden utilizarse en Javascript! Por ejemplo, si quiero recuperar mi valor anterior –primaryColor en mi Javascript, puedo realizarlo haciendo lo siguiente:

let element = document.querySelector('#myForm1');
getComputedStyle(element).getPropertyValue("--primaryColor");

Incluso puedo cambiar su valor:

element.style.setProperty("--primaryColor", '#00FF00');

// Si maintenant je refais 
getComputedStyle(element).getPropertyValue("--primaryColor");

// J'aurai comme résultat :
'#00FF00'

c/ Compatibilidad de las propiedades personalizadas con las medias queries

Las propiedades personalizadas también son compatibles con las media queries CSS. Así que puedo decidir, por ejemplo, tener una propiedad con un valor complejo para definir el número de columnas que quiero en un display: grid; :

:root {
    --columns: 1;
    --column-gap: 0px;
}
@media (min-width: 768px) {
    :root {
        --columns: 3;
        --column-gap: 30px;
    }
}

.container {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    column-gap: var(--column-gap);
}

Con las propiedades definidas en este ejemplo, mi contenedor se adaptará responsivamente a los valores establecidos.

Las variables en SASS

Acabamos de ver que las variables en CSS están presentes en el DOM y que incluso pueden ser recuperadas y utilizadas con Javascript. Mientras que en SASS esto no es posible en absoluto.

Cuando usted define variables en SASS, antes de la compilación en CSS, éstas están destinadas a ser utilizadas en su entorno SASS. Una vez compiladas estas variables ya no están presentes, se transforman a través de todo su estilo hacia los valores que usted les ha atribuído.

Ejemplo:

// Je définie ma variable
$primaryColor: #00FF00;

// Puis je l'utilise dans mes fichiers SASS
.btn-primary {
    background-color: $primaryColor;
}

El resultado de este código en SASS, tras la compilación en CSS, será:

.btn-primary {
    background-color: 00FF00;
}

Lo que hay que retener

Si ha llegado hasta aquí, se habrá dado cuenta de que no estoy diciendo que sea mejor usar uno que otro. Pero sí que realmente sus usos son muy diferentes. Así que en realidad no se pueden comparar las propiedades personalizadas de CSS y las variables de SASS porque no tienen el mismo propósito ni la misma funcionalidad.

Las propiedades personalizadas permiten definir variables en su DOM y las variables SASS permiten codificar su SASS más fácilmente. Piense en las variables de SASS exactamente como las variables en PHP o Javascript, por ejemplo.

¡Así que puede usar ambos al mismo tiempo si así lo desea!

Por ejemplo, si quiere definir una pequeña biblioteca de breakpoints puede definirlos en SASS para utilizarlos en toda su integración y también pasarlos a su DOM si quiere acceder a ellos en Javascript:

$breakpoints : (
    mobile     : 450px,
    tablet     : 768px,
    laptop     : 1200px
);

:root {
    @each $key, $val in $breakpoints {
        --breakpoint-{$key}: $val;
    }
}