Las variables son una de las principales razones por las que existen preprocesadores de CSS. La capacidad de establecer una variable para algo como un color, usar esa variable en todo el CSS que escriba y saber que será consistente, SECA y fácil de cambiar es útil. Puede utilizar variables CSS nativas (“Propiedades personalizadas de CSS”) por las mismas razones. Pero también hay algunas diferencias importantes que conviene aclarar.
Un ejemplo simple de uso de variables de preprocesador es el siguiente:
$brandColor: #F06D06;
.main-header {
color: $brandColor;
}
.main-footer {
background-color: $brandColor;
}Esa era la variante SCSS de Sass, pero todos los preprocesadores CSS ofrecen el concepto de variables: Stylus, Less, PostCSS, etc.
El código anterior no haría nada en un navegador. El navegador no entendería las declaraciones y las descartaría. Los preprocesadores deben compilarse en CSS para poder utilizarse. Este código se compilaría para:
.main-header {
color: #F06D06;
}
.main-footer {
background-color: #F06D06;
}Esto ahora es CSS válido. La variable era parte del lenguaje del preprocesador, no CSS en sí. Una vez que el código se compila, las variables desaparecen.
Más recientemente, CSS nativo ha comenzado a admitir variables CSS o “Propiedades personalizadas de CSS”. Te permite trabajar con variables directamente en CSS. No hay compilación.
Un ejemplo simple del uso de propiedades personalizadas de CSS es el siguiente:
:root {
--main-color: #F06D06;
}
.main-header {
color: var(--main-color);
}
.main-footer {
background-color: var(--main-color);
}Estas dos demostraciones logran exactamente lo mismo. Pudimos definir un color una vez y usarlo dos veces.
Entonces… ¿por qué usar uno sobre otro?
¿Por qué utilizaría propiedades personalizadas de CSS nativo?
- Puedes usarlos sin necesidad de preprocesador.
- Ellos caen en cascada. Puede establecer una variable dentro de cualquier selector para establecer o anular su valor actual.
- Cuando sus valores cambian (por ejemplo, consulta de medios u otro estado), el navegador vuelve a pintar según sea necesario.
- Puede acceder y manipularlos en JavaScript.
Con respecto a la cascada, aquí hay un ejemplo simple de eso:
:root {
--color: red;
}
body {
--color: orange;
}
h2 {
color: var(--color);
}Ningún <h2> será naranja, porque cualquier <h2> será un hijo de <body>, que tiene una mayor especificidad aplicable.
Incluso podría restablecer las variables dentro de las consultas de medios y hacer que esos nuevos valores se transmitan en cascada en todas partes usándolos, algo que simplemente no es posible con las variables del preprocesador.
Vea este ejemplo donde una consulta de medios cambia las variables que se utilizan para configurar una cuadrícula muy simple:
Rob Dodson aboga por propiedades personalizadas de CSS en variables CSS: ¿por qué debería importarle?
Las variables que [preprocessors] el uso tiene un inconveniente importante, que es que son estáticos y no se pueden cambiar en tiempo de ejecución. Agregar la capacidad de cambiar variables en tiempo de ejecución no solo abre la puerta a cosas como la tematización dinámica de aplicaciones, sino que también tiene ramificaciones importantes para el diseño receptivo y el potencial de rellenar múltiples funciones CSS futuras.
Incluye una demostración donde JavaScript cambia de estilo. No cambia los estilos de los elementos directamente, solo restablece algunas variables CSS sobre la marcha:
Wes Bos también tiene una demostración de esto en acción:
Consulte las variables CSS de actualización de lápiz con JS de Wes Bos (@wesbos) en CodePen.
Tenga en cuenta que hay un montón de cosas sobre las propiedades personalizadas de CSS que dejo aquí. Puede establecer alternativas. Puede usar calc () con ellos. Hay un montón de trucos geniales que puedes hacer con ellos. ¡Vea la sección de tareas a continuación!
¿Por qué utilizar variables de preprocesador?
- La más importante: no hay consideraciones de compatibilidad con el navegador heredado. Se compilan en CSS normal.
- Pequeñas cosas: como si pudieras quitar unidades de un valor si tuvieras que hacerlo.
Podrías usarlos juntos
Hay razones bastante convincentes para usar ambos. Absolutamente podría tener un preprocesador de CSS con propiedades personalizadas de CSS de salida. Ivan Ivanov creó una demostración que le permite escribir usando la sintaxis de las propiedades personalizadas de CSS y, a través de Sass, código de salida que tiene alternativas:
Vea las variables Pen Use CSS4 ahora mismo por $ i.van (ov) (@ vank0) en CodePen.
Tiendo a pensar que una vez que podamos usar propiedades personalizadas de CSS sin preocuparnos por la compatibilidad del navegador, las usaríamos para hacer todo nuestro manejo de variables. Es posible que todavía usemos preprocesadores para otras comodidades, pero el manejo de variables en CSS nativo parece tan bueno que probablemente valga la pena hacer todo lo posible.
Compatibilidad con el navegador de propiedades personalizadas de CSS
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y posteriores.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 49 | 31 | No | dieciséis | 10 |
Móvil / Tableta
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 96 | 95 | 96 | 10.0-10.2 |
Hora de la tarea: ¡sube de nivel!
1) Vea las variables CSS de Lea Verou: var (–subtitle);
Ella cubre muchas aplicaciones prácticas, así como algunos trucos como tomar el control de cuando las variables caen en cascada y algunas trampas.
2) Mira las animaciones reactivas de David Khourshid con CSS
David comparte la idea de que conectar eventos DOM con variables CSS puede hacer algunas cosas de UI realmente increíbles sin mucho código. Echa un vistazo a sus diapositivas (a partir del n. ° 26) que muestran lo maravilloso que es.
3) Lea la temática pragmática, práctica y progresiva de Harry Roberts con propiedades personalizadas
Su artículo explica cómo la tematización de los sitios por parte de los usuarios se vuelve mucho más fácil con las variables CSS.
4) Lea las condiciones de Roman Komarov para variables CSS
A pesar de que se habla de él de vez en cuando, no hay puertas lógicas en CSS (p. Ej. @if (true) { }). A veces lo fingimos con cosas como: comprobado, pero eso depende del DOM. Roman muestra un truco donde puedes usar 0 o 1 en una variable y luego usar eso con calc() para simular la lógica booleana.