Listo? Si es así, comencemos.
Introducción
Las variables CSS son valores que se declaran en CSS con dos propósitos. El primero es la reutilización de tales valores. El segundo es reducir la cantidad de código CSS. Veamos un ejemplo sencillo.
Estilo de elementos de la página
.section {
border: 2px solid #235ad1;
}
.section-title {
color: #235ad1;
}
.section-title::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-color: #235ad1;
}
Este ejemplo de CSS
#235ad1usa el valor tres veces. Imagina que esto es parte de un proyecto más grande. En él, estilos similares se encuentran dispersos en muchos archivos CSS. Se le pidió que cambiara el color #235ad1. En tal situación, lo mejor que puede hacer es utilizar la capacidad de los editores de código para buscar y reemplazar valores de cadena.
Pero el uso de variables CSS facilita mucho estas tareas. Hablemos de cómo declarar variables CSS. El nombre de la variable debe ir precedido de dos guiones. Declaremos una variable de estilo para la
:rootpseudoclase del elemento <html>:
:root {
--color-primary: #235ad1;
}
.section {
border: 2px solid var(--color-primary);
}
.section-title {
color: var(--color-primary);
}
.section-title::before {
/* */
background-color: var(--color-primary);
}
En mi opinión, esta pieza de código parece mucho más limpia que la anterior. La variable
--color-primaryes global porque está declarada en el estilo de la pseudoclase :root. Pero las variables CSS también se pueden declarar a nivel de elementos individuales, limitando su alcance en el documento.
Denominación variable
Las reglas para nombrar las variables CSS no son muy diferentes de las reglas que se usan en varios lenguajes de programación. Es decir, un nombre de variable CSS válido puede incluir caracteres alfanuméricos, guiones bajos y guiones. También vale la pena señalar que los nombres de estas variables distinguen entre mayúsculas y minúsculas.
/* */
:root {
--primary-color: #222;
--_primary-color: #222;
--12-primary-color: #222;
--primay-color-12: #222;
}
/* */
:root {
--primary color: #222; /* */
--primary$%#%$#
}
Alcance variable
Las variables CSS tienen una característica útil, que es que pueden tener un alcance. Esta idea se basa en los mismos principios que se aplican en varios lenguajes de programación. Por ejemplo, en JavaScript:
let element = "cool";
function cool() {
let otherElement = "Not cool";
console.log(element);
}
En este ejemplo, la variable
elementes global y está disponible en la función cool(). Pero otherElementsolo se puede acceder a la variable desde el cuerpo de la función cool(). Echemos un vistazo a esta idea aplicada a las variables CSS.
:root {
--primary-color: #235ad1;
}
.section-title {
--primary-color: d12374;
color: var(--primary-color);
}
La variable
--primary-colores global, puede consultarla desde cualquier elemento del documento. Si lo anula en un bloque .section-title, conducirá al hecho de que su nuevo valor solo se puede usar en este bloque.
Aquí hay un diagrama para explicar esta idea.
Alcance de las variables CSS
Esta es una variable que se
--primary-colorutiliza para establecer el color de los títulos de las secciones. Necesitamos personalizar el color de los títulos de las secciones Autores destacados y Artículos recientes. Por lo tanto, en los estilos de estas secciones, anulamos esta variable. Lo mismo ocurre con una variable--unit. Estos son los estilos en los que se basa el diagrama anterior.
/* */
:root {
--primary-color: #235ad1;
--unit: 1rem;
}
/* */
.section-title {
color: var(--primary-color);
margin-bottom: var(--unit);
}
/* , */
.featured-authors .section-title {
--primary-color: #d16823;
}
/* , */
.latest-articles .section-title {
--primary-color: #d12374;
--unit: 2rem;
}
Usar valores de respaldo
Normalmente, los "valores de respaldo" se utilizan para mantener los sitios funcionando en navegadores que no admiten algún mecanismo CSS moderno. Pero aquí no hablaremos de eso, sino de cómo establecer los valores usados en caso de que las variables CSS requeridas no estén disponibles. Considere el siguiente ejemplo:
.section-title {
color: var(--primary-color, #222);
}
Tenga en cuenta que
var()se pasan varios valores a la función . El segundo ,, #222se utilizará solo si la variable --primary-colorno está definida. Al especificar valores de respaldo, también puede usar construcciones anidadas var():
.section-title {
color: var(--primary-color, var(--black, #222));
}
Este enfoque para trabajar con variables puede ser útil si el valor de una variable depende de alguna acción. Si puede suceder que no haya ningún valor en una variable, es importante considerar el uso de un valor de respaldo.
Ejemplos y escenarios para usar variables CSS
▍Control del tamaño de los componentes
Componentes de diferentes tamaños Los
sistemas de diseño suelen tener, por ejemplo, botones de diferentes tamaños. Por regla general, estamos hablando de tres tamaños (pequeño, regular, grande). Usando variables CSS, es muy fácil describir estos botones y otros elementos similares.
.button {
--unit: 1rem;
padding: var(--unit);
}
.button--small {
--unit: 0.5rem;
}
.button--large {
--unit: 1.5rem;
}
Al cambiar el valor de la variable
--uniten el alcance correspondiente al componente del botón, creamos diferentes variantes del botón.
▍Variables CSS y colores HSL
HSL (Matiz, Saturación, Luminosidad - matiz, saturación, luminosidad) es un modelo de color en el que el componente H determina el color y los componentes S y L determinan la saturación y luminosidad del color.
Colores de elementos especificados mediante HSL
:root {
--primary-h: 221;
--primary-s: 71%;
--primary-b: 48%;
}
.button {
background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-b));
transition: background-color 0.3s ease-out;
}
/* */
.button:hover {
--primary-b: 33%;
}
Observe cómo oscurecí el color del botón al disminuir el valor de la variable
--primary-b.
Si está interesado en el tema del uso de colores en CSS, aquí está mi artículo al respecto.
▍ Redimensionar elementos manteniendo proporciones
Si ha trabajado en un programa de diseño como Photoshop, Sketch, Figma o Adobe XD, es posible que sepa cómo usar la tecla
Shiftal cambiar el tamaño de los objetos. Gracias a esta técnica, puedes evitar distorsionar las proporciones de los elementos.
No existe un mecanismo estándar para cambiar el tamaño de los elementos en CSS mientras se mantiene la relación de aspecto. Pero esta limitación se puede eludir utilizando, como puede imaginar, variables CSS.
Ajustar el
tamaño de los elementos mediante variables CSS Supongamos que tenemos un icono cuyo ancho y alto deben ser iguales. Para lograr esto, definí una variable CSS
--sizey la usé para ajustar el ancho y el alto del elemento.
.icon {
--size: 22px;
width: var(--size);
height: var(--size);
}
Como resultado, resulta que esta técnica simula el uso de una tecla
Shiftal cambiar el tamaño de los objetos. Basta con cambiar el valor de una variable --size. Este tema se trata con más detalle aquí .
▍Diseños basados en cuadrícula CSS
Las variables CSS pueden ser extremadamente útiles al diseñar diseños de página basados en CSS Grid. Imagine que necesita hacer que el contenedor Grid represente a los niños en función de un ancho predefinido de los elementos. En lugar de crear una clase para la presentación de cada elemento, lo que conduciría a la duplicación del código CSS, esta tarea se puede resolver utilizando variables CSS.
Cambiar el tamaño de los elementos de la cuadrícula mediante una variable CSS
.wrapper {
--item-width: 300px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
grid-gap: 1rem;
}
.wrapper-2 {
--item-width: 500px;
}
Con este enfoque, puede crear un diseño de cuadrícula flexible adecuado para su uso en varios proyectos que es fácil de mantener. La misma idea se puede aplicar a la configuración de una propiedad
grid-gap.
.wrapper {
--item-width: 300px;
--gap: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
}
.wrapper.gap-1 {
--gap: 16px;
}
Usando la variable --gap para establecer la propiedad grid-gap
Almacenar en valores variables con una estructura compleja
▍Degradados CSS
Por "valores con estructura compleja" me refiero, por ejemplo, a algo así como gradientes. Si el proyecto tiene un degradado o un fondo que se usa en muchos lugares del proyecto, entonces tiene sentido almacenar sus descripciones en variables CSS.
:root {
--primary-gradient: linear-gradient(150deg, #235ad1, #23d1a8);
}
.element {
background-image: var(--primary-gradient);
}
En tales situaciones, es posible almacenar elementos individuales de valores "complejos" en variables. Este, por ejemplo, podría ser el ángulo del gradiente:
.element {
--angle: 150deg;
background-image: linear-gradient(var(--angle), #235ad1, #23d1a8);
}
.element.inverted {
--angle: -150deg;
}
Diferentes opciones de degradado creadas cambiando la variable --angle
▍Fondo de posición
Como ya se mencionó, las variables CSS pueden almacenar valores complejos. Esto puede ser útil si tiene un elemento que, dependiendo de lo que esté sucediendo, puede necesitar colocarse en diferentes lugares de la página.
Controlar la posición de un elemento usando la variable --pos
.table {
--size: 50px;
--pos: left center;
background: #ccc linear-gradient(#000, #000) no-repeat;
background-size: var(--size) var(--size);
background-position: var(--pos);
}
Cambiar entre temas claros y oscuros
Ahora los sitios, casi sin falta, están equipados con un tema oscuro y claro. Para solucionar este problema, puede utilizar variables CSS, almacenando información sobre los colores en ellas y cambiando entre ellas después de analizar los parámetros del sistema o las configuraciones realizadas por el usuario.
Temas claros y oscuros
:root {
--text-color: #434343;
--border-color: #d2d2d2;
--main-bg-color: #fff;
--action-bg-color: #f9f7f7;
}
/* , <html> */
.dark-mode {
--text-color: #e9e9e9;
--border-color: #434343;
--main-bg-color: #434343;
--action-bg-color: #363636;
}
Aquí hay una demostración en video de la idea anterior.
Establecer valores predeterminados
En algunas situaciones, debe configurar las variables CSS mediante JavaScript . Imagine que necesitamos establecer un valor de propiedad para un
heightelemento que se puede cambiar de tamaño. Aprendí sobre esta técnica en este artículo.
La variable está
--details-height-openinicialmente vacía. Está previsto utilizarlo en la descripción del estilo de algún elemento. Debe contener la altura del elemento en píxeles. Si no puede establecer el valor de esta variable desde JavaScript por alguna razón, es importante proporcionar el uso de algún valor de respaldo predeterminado en su lugar.
.section.is-active {
max-height: var(--details-height-open, auto);
}
En este ejemplo, se reproduce el predeterminado
auto. Se aplicará si JavaScript no establece el valor de la variable --details-height-open.
Ajustar el ancho de un elemento contenedor
Controlar el ancho de un
elemento contenedor Los elementos contenedores utilizados en páginas web pueden tener diferentes tamaños en diferentes situaciones. Quizás una página podría necesitar un contenedor pequeño y otra podría necesitar un contenedor más grande. En tales casos, las variables CSS se pueden utilizar con éxito para controlar el tamaño de los contenedores.
.wrapper {
--size: 1140px;
max-width: var(--size);
}
.wrapper--small {
--size: 800px;
}
Estilos en línea
El uso de variables CSS en estilos en línea puede abrir un montón de nuevas posibilidades para los desarrolladores front-end que nunca supieron que existían. De hecho, escribí un artículo completo sobre esto , pero aquí seguiré hablando de las formas más interesantes de usar variables en estilos en línea.
Puede ser mejor no utilizar estos métodos en la producción. Son muy adecuados para la creación de prototipos y para explorar diversas ideas de diseño.
▍Elementos de cuadrícula dinámica
Por ejemplo, para ajustar el ancho de un elemento, puede utilizar una variable
--item-widthdeclarada directamente en el atributo del elemento style. Este enfoque puede resultar útil al crear prototipos de diseños de cuadrícula.
Aquí está el HTML del elemento:
<div class="wrapper" style="--item-width: 250px;">
<div></div>
<div></div>
<div></div>
</div>
Aquí está el estilo aplicado a este elemento:
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
grid-gap: 1rem;
}
Aquí puede experimentar con el ejemplo de esta sección.
▍ Avatares de usuario
Avatares de diferentes tamaños
Otro uso interesante de las variables CSS en los estilos en línea es la creación de elementos de diferentes tamaños. Supongamos que, en diferentes situaciones, necesitamos mostrar el avatar de un usuario de varios tamaños. Dicho esto, queremos controlar su tamaño utilizando una única variable CSS.
Aquí está el marcado:
<img src="user.jpg" alt="" class="c-avatar" style="--size: 1" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 2" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 3" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 4" />
Estos son los estilos:
.c-avatar {
display: inline-block;
width: calc(var(--size, 1) * 30px);
height: calc(var(--size, 1) * 30px);
}
Analicemos estos estilos:
- Tenemos un diseño
var(--size, 1). Proporciona un valor predeterminado. Se utiliza cuando el valor de la variable--sizeno se establece mediante el atributo delstyleelemento con estilo. - El tamaño mínimo del elemento se establece en
30px*30px.
Preguntas de los medios
El uso conjunto de variables CSS y consultas de medios puede contribuir en gran medida a personalizar los valores de las variables utilizadas en todas las páginas de su sitio web. El ejemplo más simple de usar esta técnica que me viene a la mente es ajustar el espacio entre elementos:
:root {
--gutter: 8px;
}
@media (min-width: 800px) {
:root {
--gutter: 16px;
}
}
Como resultado, las propiedades de cualquier elemento que use la variable
--gutterdependerán del ancho de la ventana gráfica del navegador. Para mí, esta es una gran oportunidad.
Herencia
Las variables CSS admiten la herencia. Si se declara una variable CSS dentro del elemento padre, los elementos descendientes heredan esta variable. Veamos un ejemplo.
Aquí está el HTML:
<div class="parent">
<p class="child"></p>
</div>
Estos son los estilos:
.parent {
--size: 20px;
}
.child {
font-size: var(--size);
}
El elemento
.childhereda una variable --sizedeclarada en el estilo del elemento .parent. El artículo .childtiene acceso a esta variable. Creo que esto es muy interesante. Quizás ahora se esté preguntando cómo nos beneficia. Creo que el siguiente ejemplo de la vida real ayudará a responder esta pregunta.
Herencia de variables CSS
Existe un grupo de botones con los siguientes requisitos:
- La capacidad de cambiar el tamaño de todos los elementos estableciendo el valor de una sola variable.
- La distancia entre los elementos debe cambiar dinámicamente según su tamaño. Con un aumento en los elementos, la distancia entre ellos aumenta y con una disminución, disminuye.
Aquí está el marcado para este ejemplo:
<div class="actions">
<div class="actions__item"></div>
<div class="actions__item"></div>
<div class="actions__item"></div>
</div>
Estos son los estilos:
.actions {
--size: 50px;
display: flex;
gap: calc(var(--size) / 5);
}
.actions--m {
--size: 70px;
}
.actions__item {
width: var(--size);
height: var(--size);
}
Observe cómo utilicé la variable
--sizeal configurar la propiedad para los gapelementos de Flexbox. Esto permite, basado en una variable --size, cambiar dinámicamente la distancia entre elementos
Otro ejemplo de uso del mecanismo de herencia para variables CSS es la configuración de animaciones CSS. Tomé este ejemplo de aquí .
@keyframes breath {
from {
transform: scale(var(--scaleStart));
}
to {
transform: scale(var(--scaleEnd));
}
}
.walk {
--scaleStart: 0.3;
--scaleEnd: 1.7;
animation: breath 2s alternate;
}
.run {
--scaleStart: 0.8;
--scaleEnd: 1.2;
animation: breath 0.5s alternate;
}
Con este enfoque, no necesitamos declarar dos veces
@keyframes. Estilos .walky .runanulación de valores de variables heredados.
Validación de variables CSS
Si resulta que
var()algo está mal con la variable CSS pasada a la función , el navegador reemplazará el valor de esta variable con el valor original (heredado) de la propiedad correspondiente.
:root {
--main-color: 16px;
}
.section-title {
color: var(--main-color);
}
Aquí , el valor se escribe en la variable
--main-colorutilizada para establecer la propiedad . Y esto está completamente mal. La propiedad se hereda. El navegador en esta situación funciona de acuerdo con el siguiente algoritmo:color16pxcolor
- ¿Es la propiedad heredable?
Así es como funciona el navegador.
Cómo funciona el navegador cuando se detecta un valor de variable CSS no válido
▍Concepto de valor no válido que aparece durante el cálculo
Lo que se discutió anteriormente, desde un punto de vista técnico, se denomina "No válido en el momento del valor calculado". La situación en la que aparecen dichos valores se produce cuando se pasa una
var()variable CSS válida a la función , cuyo valor no es adecuado para escribir en la propiedad que se está configurando con su ayuda.
Considere el siguiente ejemplo, que tomé de este artículo:
.section-title {
top: 10px;
top: clamp(5px, var(--offset), 20px);
}
Si el navegador no admite la función
clamp(), ¿utilizará el valor especificado en la construcción como alternativa top: 10px? Para responder a esta pregunta brevemente, no, no la usará. La razón de esto es que para cuando el navegador detecte un valor no válido que están intentando escribir en una propiedad, habrá descartado los otros valores, de acuerdo con el orden de los estilos en cascada. Es decir, simplemente ignorará la construcción top: 10px.
Esto es lo que dice la especificación CSS al respecto :
El concepto de un valor no válido que aparece durante el cálculo existe porque los errores asociados con las variables no aparecen, a diferencia de otros errores de sintaxis, en las primeras etapas de un sistema. Por tanto, resulta que cuando el agente de usuario descubre que el valor de la variable es incorrecto, ya descartará los demás valores, de acuerdo con el orden de los estilos en cascada.
Como resultado, resulta que si desea utilizar funciones CSS que no son ampliamente compatibles con los navegadores que se implementan mediante variables CSS, debe aplicar la directiva
@supports. Así es como se hace en el artículo anterior:
@supports (top: max(1em, 1px)) {
#toc {
top: max(0em, 11rem - var(--scrolltop) * 1px);
}
}
Hallazgos interesantes
▍ Almacenamiento de URL en variables
Quizás algunos de los recursos utilizados en sus páginas web deban descargarse de fuentes externas. En situaciones como esta, puede almacenar la URL de estos recursos en variables CSS.
:root {
--main-bg: url("https://example.com/cool-image.jpg");
}
.section {
background: var(--main-bg);
}
En este punto, puede surgir la pregunta de si es posible manejar construcciones de vista
var(--main-bg)usando una función CSS url(). Considere el siguiente ejemplo:
:root {
--main-bg: "https://example.com/cool-image.jpg";
}
.section {
background: url(var(--main-bg));
}
Esto no funcionará, ya que la función
url()interpreta la estructura completa var(--main-bg)como una URL, lo cual es incorrecto. Para cuando el navegador calcule el valor, ya será incorrecto, la construcción considerada no funcionará como se esperaba.
▍Almacenar varios valores
Se pueden almacenar varios valores en variables CSS. Si estos son valores que parece que deberían verse en el lugar donde planea usar la variable, entonces esa construcción funcionará. Veamos un ejemplo.
El valor de la variable se ve como se esperaba.Aquí
está el CSS:
:root {
--main-color: 35, 90, 209;
}
.section-title {
color: rgba(var(--main-color), 0.75);
}
Tiene una función
rgba()y valores RGB, separados por comas y almacenados en una variable CSS. Estos valores se utilizan al especificar el color. Con este enfoque de uso de la función rgba(), el desarrollador tiene la oportunidad de influir en el valor correspondiente al canal alfa del color, ajustando el color de varios elementos.
El único inconveniente de este enfoque es que el color asignado por la función
rgba()no se puede ajustar con las herramientas de desarrollo del navegador. Si esta característica es importante cuando trabaja en su proyecto, la forma anterior de usar la función probablemente no le funcione rgba().
A continuación, se muestra un ejemplo del uso de una variable CSS para establecer una propiedad
background:
:root {
--bg: linear-gradient(#000, #000) center/50px;
}
.section {
background: var(--bg);
}
.section--unique {
background: var(--bg) no-repeat;
}
Esto muestra el estilo de dos secciones del sitio. El fondo de uno de ellos no debe repetirse a lo largo de los ejes
xy y.
▍Cambio de valores de variables CSS en @keyframes Rule Body
Si ha leído las especificaciones sobre variables CSS, es posible que haya encontrado el término "contaminado por animación" allí. Describe el hecho de que los valores de las variables CSS no se prestan a cambios suaves en la regla
@keyframes. Veamos un ejemplo.
Aquí está el HTML:
<div class="box"></div>
Estos son los estilos:
.box {
width: 50px;
height: 50px;
background: #222;
--offset: 0;
transform: translateX(var(--offset));
animation: moveBox 1s infinite alternate;
}
@keyframes moveBox {
0% {
--offset: 0;
}
50% {
--offset: 50px;
}
100% {
--offset: 100px;
}
}
La animación en este caso no será fluida. La variable tendrá sólo tres valores
0, 50pxy 100px. La especificación de CSS dice que cualquier propiedad personalizada utilizada en una regla se @keyframesconvierte en una propiedad contaminada con animación, lo que afecta la forma en que la función la maneja var()al animar elementos.
Si necesitamos proporcionar una animación suave en el ejemplo anterior, entonces debemos hacerlo como se hizo antes. Es decir, debe reemplazar la variable con esas propiedades CSS del elemento que desea animar.
@keyframes moveBox {
0% {
transform: translateX(0);
}
50% {
transform: translateX(50px);
}
100% {
transform: translateX(100px);
}
}
→ Aquí hay un ejemplo que
me gustaría señalar que después de la publicación de este artículo, se me informó que
@keyframestodavía es posible animar variables CSS en formato . Pero para esto, las variables deben registrarse usando la regla @property. Hasta ahora, esta función solo es compatible con los navegadores basados en Chromium.
@property --offset {
syntax: "<length-percentage>";
inherits: true;
initial-value: 0px;
}
Aquí puede experimentar con un ejemplo de esta función.
▍Cálculo
Es posible que no sepa que las variables CSS se pueden utilizar en los cálculos. Echemos un vistazo al ejemplo que ya vimos cuando hablamos de avatares:
.c-avatar {
display: inline-block;
width: calc(var(--size, 1) * 30px);
height: calc(var(--size, 1) * 30px);
}
El tamaño del avatar depende del valor de la variable
--size. El valor predeterminado es 1. Esto significa que el tamaño de avatar predeterminado es 30px*30px. Tenga en cuenta los siguientes estilos y que cambiar esta variable cambiará el tamaño del avatar.
.c-avatar--small {
--size: 2;
}
.c-avatar--medium {
--size: 3;
}
.c-avatar--large {
--size: 4;
}
Herramientas de desarrollo de navegadores y variables CSS
Al utilizar las herramientas de desarrollo de varios navegadores, existen algunos trucos útiles que pueden utilizarse para facilitar el trabajo con variables CSS. Hablemos de ellos.
▍Visualización de colores definidos mediante variables
Encuentro útil poder ver el color descrito por una variable CSS. Esta función está disponible en los navegadores Chrome y Edge.
Ver el color dado por una variable CSS
▍ Valores calculados
Para ver el valor calculado de una variable CSS, según el navegador, mueva el puntero del mouse sobre la variable o haga clic en un botón especial.
Visualización de valores calculados
En todos los navegadores excepto Safari, los valores calculados se pueden ver simplemente colocando el cursor sobre una variable. En Safari, debe hacer clic en el botón con un par de rayas para hacer esto.
▍ Entrada de autocompletar
Cuando se trabaja en proyectos grandes, es difícil recordar los nombres de todas las variables CSS utilizadas en ellos. Pero con las capacidades de autocompletar disponibles en los navegadores Chrome, Firefox y Edge, esto no es un problema.
Completar el nombre de la variable para que
este mecanismo funcione; simplemente comience a ingresar el nombre de la variable.
▍Deshabilitar variables CSS
Si una variable CSS necesita deshabilitarse de todos los elementos que la utilizan, basta con desmarcar la casilla junto a la variable en el elemento donde está declarada.
Casillas de verificación para deshabilitar las variables CSS
Salir
He cubierto bastante sobre las variables CSS. Espero que le resulte útil lo que aprendió hoy.
¿Utiliza variables CSS en sus proyectos?
