Todo lo que necesitas saber sobre las variables CSS

Este es el primer capítulo de mi nuevo libro electrónico (disponible en formato PDF y Mobi).

La mayoría de los lenguajes de programación tienen soporte para variables. Pero lamentablemente, CSS ha carecido de soporte para variables nativas desde el principio.

¿Escribes CSS? Entonces no hay variables para ti. Bueno, excepto si usabas un preprocesador como Sass.

Los preprocesadores como Sass venden el uso de variables como un gran complemento. Una razón para probarlos. ¿Y sabes qué? Es una muy buena razón.

Bueno, la web se mueve rápido. Y me complace informar que CSS ahora finalmente admite variables.

Si bien los preprocesadores admiten muchas más funciones, la adición de variables CSS es buena. Esto mueve la web aún más cerca del futuro.

En esta guía, le mostraré cómo las variables funcionan de forma nativa en CSS y cómo puede usarlas para facilitarle la vida.

Lo que aprenderás

Primero te guiaré por los conceptos básicos de las variables CSS. Creo que cualquier intento decente de comprender las variables CSS debe comenzar aquí.

Aprender los fundamentos es genial. Lo que es aún mejor es aplicar estos fundamentos para crear aplicaciones del mundo real.

Así que resumiré las cosas mostrándole cómo construir 3 proyectos que muestren las variables CSS y su facilidad de uso. Aquí hay una vista previa rápida de estos 3 proyectos.

Proyecto 1: Crear variaciones de componentes usando variables CSS

Es posible que ya esté creando variaciones de componentes hoy. Ya sea que use React, Angular o Vue, CSS Variables facilitará este proceso.

Crear variaciones de componentes usando variables CSS

Echa un vistazo al proyecto en Codepen.

Proyecto 2: Estilos temáticos con variables CSS

Probablemente hayas visto esto en alguna parte. Mostraré lo fácil que son las variables CSS para crear estilos de temas en todo el sitio.

Estilos de tema en todo el sitio utilizando variables CSS

Echa un vistazo al proyecto en Codepen.

Proyecto 3: Construyendo la cabina de variables CSS

Este es el proyecto final. No importa el nombre. No podría encontrar un mejor nombre.

El color de los cuadros se actualiza dinámicamente.

Observe cómo se actualizan dinámicamente los colores de los cuadros y cómo se rota el contenedor del cuadro en el espacio 3D a medida que se cambia la entrada del rango.

Este proyecto muestra la facilidad de actualizar las variables CSS con JavaScript y los beneficios reactivos que obtienes con él.

¡Esto va a ser divertido!

Pasa un tiempo divirtiéndote en Codepen.

Nota: El artículo asume que tienes una buena comprensión de CSS. Si no conoce muy bien CSS, o desea aprender a crear interfaces de usuario asombrosas, le recomiendo tomar mi curso avanzado de CSS (curso pago que incluye 85 lecciones). Este artículo es un extracto del curso.

¿Por qué las variables son tan importantes?

Si eres nuevo en las variables en preprocesadores o CSS nativo, aquí hay algunas razones por las cuales las variables son importantes.

Razón # 1: código más legible

Sin decir mucho, puede decir rápidamente cómo las variables legibles y más mantenibles hacen que cualquier código base.

Razón n. ° 2: facilidad de cambio en documentos grandes

Si tiene todas sus constantes guardadas en un archivo separado, no tiene que saltar a través de miles de líneas de código cuando desee realizar un cambio en una variable.

Se vuelve súper fácil. Solo cámbialo en un solo lugar, y listo.

Razón # 3: Puedes detectar errores tipográficos más rápido

Es difícil buscar entre líneas de códigos que intentan detectar un error. Es aún más molesto si el error se debió a un simple error tipográfico. Son difíciles de detectar. El buen uso de las variables elimina estas molestias.

Con este fin, la legibilidad y la facilidad de mantenimiento son las grandes victorias.

Gracias a las variables CSS, ahora también podemos tenerlas con CSS nativo.

Definiendo variables CSS

Permítanme comenzar con algo con lo que ya están familiarizados: variables en JavaScript.

Una simple variable de JavaScript puede declararse así:

var amAwesome;

y luego puedes asignarle un valor así:

amAwesome = "cadena impresionante"

En CSS, una variable CSS es cualquier "propiedad" cuyo nombre comienza con dos guiones.

/ * ¿puedes ver la variable aquí? * /
.block {
 color: # 8cacea;
--color azul
}
Las variables CSS también se denominan

Ámbito variable de CSS

Hay una cosa más para señalar su atención.

Recuerde que en JavaScript, las variables tienen un alcance. Pueden tener un alcance global o local.

Lo mismo puede decirse de las variables CSS.

Considere el siguiente ejemplo:

: root {
  - color principal: rojo
}

El selector raíz le permite apuntar al elemento de más alto nivel en el DOM, o árbol de documentos.

Por lo tanto, las variables declaradas de esta manera tienen un alcance del ámbito global.

¿Lo tengo?

Variables locales y de alcance global

Ejemplo 1

Suponiendo que quisiera crear una variable CSS que almacenara el color primario de un sitio temático.

¿Cómo haría usted para esto?

  1. Usted crea el selector de ámbito. Uso: raíz para una variable 'global'
: root {
 
}

2. Defina la variable

: root {
 - color primario: rojo
}

Recuerde, una variable CSS es cualquier "propiedad" cuyo nombre comienza con dos guiones, por ejemplo, --color

Eso fue simple.

Usando variables CSS

Una vez que una variable ha sido definida y asignada un valor, puede continuar y usarla dentro de un valor de propiedad.

Sin embargo, hay un poco de problema.

Si viene del mundo de los preprocesadores, debe estar acostumbrado a usar una variable simplemente haciendo referencia a su nombre. Por ejemplo:

$ font-size: 20px

.prueba {
  font-size: $ font-size
}

Con las variables nativas de CSS, las cosas son un poco diferentes. Hace referencia a una variable utilizando la función var ().

Con el ejemplo anterior, el uso de Variables CSS producirá esto:

: root {
  - Tamaño de fuente: 20px
}

.prueba {
  font-size: var (- font-size)
}

Bastante diferente.

Recuerde usar la función var

Una vez que lo elimine, comenzará a amar las variables CSS, ¡mucho!

Otra nota importante es que, a diferencia de las variables en Sass (u otros preprocesadores), donde puede usar las variables en muchos lugares y hacer cálculos matemáticos como desee, debe tener cuidado con las variables CSS. En su mayoría, los establecerá como valores de propiedad.

/*esto está mal*/
.margin {
- lado: margen superior;
var (- lado): 20px;
}
La declaración se descarta como un error de sintaxis por tener un nombre de propiedad no válido

Tampoco puedes hacer matemáticas. Necesita la función CSS calc () para eso. Discutiré ejemplos a medida que avancemos.

/*esto está mal */
.margin {
- espacio: 20px * 2;
tamaño de fuente: var (- espacio); // no 40px
}

Si debe hacer cálculos matemáticos, use la función calc () de la siguiente manera:

.margin {
- espacio: calc (20px * 2);
tamaño de fuente: var (- espacio); / * es igual a 40 px * /
}

Propiedades dignas de mención

Aquí hay algunos comportamientos que vale la pena mencionar.

1. Las propiedades personalizadas son propiedades ordinarias, por lo que se pueden declarar en cualquier elemento.

Declararlos en un elemento de párrafo, sección, a un lado, raíz, o incluso pseudo elementos. Trabajarán como se esperaba.

Se comportan como propiedades normales.

2. Las variables CSS se resuelven con la herencia normal y las reglas en cascada

Considere el bloque de código a continuación:

div {
  --color rojo;
}

div.test {
  color: var (- color)
}

div.ew {
  color: var (- color)
}

Al igual que con las variables normales, el valor --color será heredado por los divs.

3. Las variables CSS pueden hacerse condicionales con @media y otras reglas condicionales

Al igual que con otras propiedades, puede cambiar el valor de una variable CSS dentro de un bloque @media u otras reglas condicionales.

Por ejemplo, el siguiente código cambia el valor de la variable, canalón en dispositivos más grandes.

: root {
 - canalón: 10px
}

@media screen y (min-width: 768px) {
    - canalón: 30px
}
Bit útil para diseño receptivo

4. Las variables CSS se pueden usar en el atributo de estilo HTML.

Puede elegir establecer el valor de sus variables en línea, y seguirán funcionando como se esperaba.





cuerpo {
  color: var (- color)
}
Establecer variables en línea

Las variables CSS distinguen entre mayúsculas y minúsculas. Ten cuidado con éste. Me ahorro el estrés y escribo variables en minúsculas. Su kilometraje puede diferir.

/ * estas son dos variables diferentes * /
: root {
 --color azul;
--Color rojo;
}

Resolviendo Declaraciones Múltiples

Al igual que con otras propiedades, las declaraciones múltiples se resuelven con la cascada estándar.

Veamos un ejemplo:

/ * define las variables * /
: raíz {--color: azul; }
div {--color: verde; }
#alert {--color: rojo; }

/ * usa la variable * /
* {color: var (- color); }

Con las declaraciones de variables anteriores, ¿cuál será el color de los siguientes elementos?

¿Cuál es mi color?

y yo?
  ¿Cuál es mi color también?   

color?

¿Puedes resolver eso?

El primer párrafo será azul. No hay una definición directa de color establecida en un selector p, por lo que hereda el valor de: root

: raíz {--color: azul; }

El primer div será verde. Eso está bastante claro. Hay una definición de variable directa establecida en el div

div {--color: verde; }

El div con la ID de alerta NO será verde. Será rojo

#alert {--color: rojo; }

El ID tiene un alcance variable directo. Como tal, el valor dentro de la definición anulará a los demás. El selector #alert es más específico.

Finalmente, la p dentro del #alert será ... roja

No hay declaración de variable en el elemento de párrafo. Es posible que haya esperado que el color sea azul debido a la declaración en el: elemento raíz.

: raíz {--color: azul; }

Al igual que con otras propiedades, las variables CSS se heredan. El valor se hereda del padre, #alert

#alert {--color: rojo; }
La solución al cuestionario

Resolviendo dependencias cíclicas

Una dependencia cíclica ocurre de las siguientes maneras:

  1. Cuando una variable depende de sí misma. Es decir, utiliza un var () que se refiere a sí mismo.
: root {
  --m: var (- m)
}

cuerpo {
  margen: var (- m)
}

2. Cuando dos o más variables se refieren entre sí.

: root {
  - uno: calc (var (- dos) + 10px);
  - dos: calc (var (- uno) - 10px);
}

Tenga cuidado de no crear dependencias cíclicas dentro de su código.

¿Qué sucede con las variables inválidas?

Los errores de sintaxis se descartan, pero las sustituciones no válidas de var () tienen el valor inicial o heredado de la propiedad en cuestión.

Considera lo siguiente:

: root {--color: 20px; }
p {color de fondo: rojo; }
p {background-color: var (- color); }

Como se esperaba, --color se sustituye en var () pero el valor de la propiedad, background-color: 20px no es válido después de la sustitución. Dado que el color de fondo no es una propiedad heredable, el valor predeterminado será su valor inicial de transparente.

Tenga en cuenta que si hubiera escrito background-color: 20px sin ningún sustituto variable, la declaración de fondo en particular no habría sido válida. Se utilizará la declaración anterior.

El caso es diferente cuando escribe la declaración usted mismo

Tenga cuidado al construir fichas individuales

Cuando establece el valor de una propiedad como se indica a continuación, el 20px se interpreta como un token único.

tamaño de fuente: 20px

Una manera simple de decir eso es que el valor 20px se ve como una única "entidad".

Debe tener cuidado al crear tokens únicos con variables CSS.

Por ejemplo, considere el siguiente bloque de código:

: root {
 --tamaño: 20
}

div {
  tamaño de fuente: var (- tamaño) px / * WRONG * /
}

Es posible que haya esperado que el valor del tamaño de fuente arroje 20 píxeles, pero eso está mal.

El navegador interpreta esto como 20 px

Tenga en cuenta el espacio después de los 20

Por lo tanto, si debe crear tokens individuales, haga que una variable represente todo el token. Por ejemplo, --size: 20px, o use la función calc, por ejemplo calc (var (- size) * 1px) donde --size es igual a 20

No te preocupes si aún no entiendes esto. Lo explicaré con más detalle en un próximo ejemplo.

¡Vamos a construir cosas!

Ahora esta es la parte del artículo que hemos estado esperando.

Lo guiaré a través de aplicaciones prácticas de los conceptos discutidos mediante la construcción de algunos proyectos útiles.

Empecemos.

Proyecto 1: Crear variaciones de componentes usando variables CSS

Considere el caso en el que necesita construir dos botones diferentes. Los mismos estilos base, solo un poco de diferencia.

En este caso, las propiedades que difieren son el color de fondo y el color del borde de la variante.

Entonces, ¿cómo harías esto?

Aquí está la solución típica.

Cree una clase base, diga .btn y agregue las clases variantes. Aquí hay un ejemplo de marcado:


.btn contendría los estilos base en el botón. Por ejemplo:

.btn {
  acolchado: 2rem 4rem;
  borde: 2px negro sólido;
  fondo: transparente;
  tamaño de fuente: 0.6em;
  radio de borde: 2px;
}
/*en vuelo estacionario */
.btn: hover {
  cursor: puntero;
  fondo: negro;
  color blanco;
}

Entonces, ¿dónde entra la variante?

Aquí:

/ * variaciones * /

.btn.red {
  color del borde: rojo
}
.btn.red: hover {
  fondo: rojo
}

¿Ves cómo estamos duplicando el código aquí y allá? Esto es bueno, pero podríamos mejorarlo con las variables CSS.

¿Cuál es el primer paso?

¡Sustituya los colores variables con variables CSS y no olvide agregar valores predeterminados para las variables!

.btn {
   acolchado: 2rem 4rem;
   borde: 2px var sólido (- color, negro);
   fondo: transparente;
   tamaño de fuente: 0.6em;
   radio de borde: 2px;
 }
 /*en vuelo estacionario*/
 .btn: hover {
  cursor: puntero;
   fondo: var (- color, negro);
   color blanco;
 }

Cuando haces esto: background: var (- color, black) que estás diciendo, establece el fondo en el valor de la variable --color. Sin embargo, si la variable no existe, use el valor predeterminado de negro

Así es como establece los valores de las variables predeterminadas. Tal como lo hace en JavaScript o en cualquier otro lenguaje de programación.

Aquí está la buena parte.

Con las variantes, solo proporciona el nuevo valor de la variable CSS como se muestra a continuación:

.btn.red {
   --color rojo
 }

Eso es todo. Ahora, cuando se usa la clase .red, el navegador observa el valor de la variable --color diferente e inmediatamente actualiza la apariencia del botón.

Esto es realmente bueno si pasas mucho tiempo construyendo componentes reutilizables.

Aquí hay una comparación lado a lado:

Sin variables CSS VS con variables CSS

Ah, y si tuvieras más variantes, solo te ahorrarías mucho tipeo adicional.

¿¿Ver la diferencia??

Proyecto 2: Sitios temáticos con variables CSS

Estoy seguro de que los has encontrado antes. Los sitios temáticos le dan al usuario la sensación de personalización. Como si tuvieran el control.

A continuación se muestra el ejemplo básico que crearemos.

Entonces, ¿qué tan fácil hacen esto las variables CSS?

Vamos a echar un vistazo.

Justo antes de eso, quería mencionar que este ejemplo es bastante importante. Con este ejemplo, presentaré el concepto de actualizar las variables CSS con JavaScript.

¡Es divertido!

Te encantará.

Lo que realmente queremos hacer.

La belleza de las variables CSS es su naturaleza reactiva. Tan pronto como se actualizan, cualquier propiedad que tenga el valor de la variable CSS también se actualiza.

Conceptualmente, aquí hay una imagen que explica el proceso con respecto al ejemplo en cuestión.

El proceso

Por lo tanto, necesitamos un poco de JavaScript para el oyente de clics.

Para este sencillo ejemplo, el fondo y el color del texto de toda la página se basan en variables CSS.

Cuando hace clic en cualquiera de los botones anteriores, establecen la variable CSS en otro color. Como resultado de eso, se actualiza el fondo de la página.

Oye, eso es todo.

Uh, una cosa más.

Cuando digo que la variable CSS está configurada con algún otro valor, ¿cómo se hace?

Establecer la variable en línea

Las variables CSS tendrán efecto incluso si están configuradas en línea. Con JavaScript, obtenemos el documento raíz y establecemos el nuevo valor para la variable CSS en línea.

¿Lo tengo?

Se habla mucho, hagamos lo real.

El marcado inicial

El marcado inicial necesario es este:

        
...

El marcado consta de tres botones dentro de un elemento padre .theme. Para mantener las cosas cortas, he truncado el contenido dentro del elemento del artículo. Dentro de este elemento del artículo se encuentra el contenido de la página.

Estilizando la página

El éxito de este proyecto comienza con el diseño de la página. El truco es simple.

En lugar de simplemente establecer el color de fondo y el color de la página en piedra, los configuraremos en función de las variables.

Esto es lo que quiero decir.

cuerpo {
  color de fondo: var (- bg, blanco);
  color: var (- bg-text, negro)
}

La razón de esto es algo obvio. Cada vez que se hace clic en un botón, cambiaremos el valor de ambas variables dentro del documento.

Tras este cambio, se actualizará el estilo general de la página. Pan comido.

Entonces, sigamos adelante y manejemos la actualización de JavaScript.

Entrar en el JavaScript

Seguiré adelante y escupiré todo el JavaScript necesario para este proyecto.

const root = document.documentElement
const themeBtns = document.querySelectorAll ('. theme> button')

themeBtns.forEach ((btn) => {
  btn.addEventListener ('clic', handleThemeUpdate)
})

función handleThemeUpdate (e) {
  switch (e.target.value) {
    caso 'oscuro':
      root.style.setProperty ('- bg', 'black')
      root.style.setProperty ('- bg-text', 'white')
      rotura
    caso 'calma':
       root.style.setProperty ('- bg', '# B3E5FC')
       root.style.setProperty ('- bg-text', '# 37474F')
      rotura
    caso 'luz':
      root.style.setProperty ('- bg', 'white')
      root.style.setProperty ('- bg-text', 'black')
      rotura
  }
}

No dejes que eso te asuste. Es mucho más fácil de lo que probablemente piensas.

En primer lugar, mantenga una referencia al elemento raíz, const root = document.documentElement

El elemento raíz aquí es el elemento HTML. Verá por qué esto es importante en un momento. Si tiene curiosidad, es necesario establecer los nuevos valores de las variables CSS.

Además, mantenga una referencia a los botones también, const themeBtns = document.querySelectorAll ('. Theme> button')

querySelectorAll produce una estructura de datos tipo matriz que podemos recorrer. Itere sobre cada uno de los botones y agregue un detector de eventos al hacer clic.

Así es cómo:

themeBtns.forEach ((btn) => {
  btn.addEventListener ('clic', handleThemeUpdate)
})

¿Dónde está la función handleThemeUpdate? Lo discutiré a continuación.

Cada botón que se haga clic tendrá el handleThemeUpdate como su función de devolución de llamada. Es importante tener en cuenta en qué botón se hizo clic y luego realizar la operación correcta.

A la luz de eso, se utiliza un operador de interruptor, y algunas operaciones se llevan a cabo en función del valor del botón en el que se hace clic.

Continúe y eche un segundo vistazo al bloque de código JavaScript. Lo entenderás mucho mejor ahora.

Proyecto 3: Construyendo la cabina de variables CSS

En caso de que te lo hayas perdido, esto es lo que construiremos:

Recuerde que el color de las cajas se actualiza dinámicamente y que el contenedor de la caja se gira en el espacio 3d a medida que se cambia la entrada del rango.

Puedes seguir adelante y jugar con él en Codepen.

Este es un excelente ejemplo de actualización de variables CSS con JavaScript y la reactividad que viene con él.

Veamos cómo construir esto.

El marcado

Aquí están los componentes necesarios.

  1. Una entrada de rango
  2. Un contenedor para guardar las instrucciones.
  3. Una sección para guardar una lista de otros cuadros, cada uno con campos de entrada

El marcado resulta simple.

Aquí está:

        
    
    
    
    
    
    
  
  
     Mueva el control deslizante
     Escribe cualquier color en los cuadros rojos   

Aquí hay algunas cosas para señalar su atención.

  1. La entrada de rango representa valores de -50 a 50 con un valor de paso de 5 Además, el valor de la entrada de rango es el valor mínimo, -50
  2. Si no está seguro de cómo funciona la entrada de rango, compruébelo en w3schools
  3. Observe cómo la sección con la clase .color-boxes contiene otros contenedores .color-box. Dentro de estos contenedores existen campos de entrada.
  4. Quizás valga la pena mencionar que la primera entrada tiene un valor predeterminado de rojo.

Una vez que haya entendido la estructura del documento, siga adelante y asígnele un estilo así:

  1. Retire los contenedores .slider e .instructions del flujo de documentos. Posicionarlos absolutamente.
  2. Dale al elemento del cuerpo un color de fondo del amanecer y adorna el fondo con una flor en la esquina inferior izquierda
  3. Coloque el contenedor de cajas de colores en el centro.
  4. Dale estilo al contenedor de cajas de colores

Eliminemos esto.

Lo siguiente arreglará la primera tarea.

/ * Control deslizante * /
.slider,
.instrucciones {
  posición: absoluta;
  fondo: rgba (0,0,0,0.4);
  acolchado: 1rem 2rem;
  radio de borde: 5px
}
.slider {
  derecha: 10px;
  arriba: 10px;
}
.slider> * {
  bloqueo de pantalla;
}


/ * Instrucciones * /
.instrucciones {
  alinear texto: centro;
  abajo: 0;
  fondo: inicial;
  de color negro;
}

El fragmento de código no es tan complejo como crees. Espero que puedas leerlo y entenderlo. Si no, suelta un comentario o un tweet.

Estilizar el cuerpo es un poco más complicado. Con suerte, entiendes bien CSS.

Dado que aspiramos a diseñar el elemento con un color de fondo y una imagen de fondo, tal vez sea la mejor opción utilizar la propiedad de taquigrafía de fondo para establecer múltiples fondos.

Aquí está:

cuerpo {
  margen: 0;
  color: rgba (255,255,255,0.9);
  fondo: url ('http://bit.ly/2FiPrRA') 0 100% / 340px sin repetición, var (- color primario);
  font-family: 'Shadows Into Light Two', cursiva;
}

El bit de url es el enlace a la flor del amanecer.

El siguiente conjunto de propiedades 0 100% representa la posición de fondo de la imagen.

Aquí hay una ilustración de cómo funciona el posicionamiento de fondo CSS:

De: la guía avanzada de CSSDe: la guía avanzada de CSS

El otro bit después de la barra diagonal representa el tamaño del fondo. Esto se ha establecido en 340 px. Si lo hiciera más pequeño, la imagen también sería más pequeña.

sin repetir, podrías descubrir qué hace eso. Impide que el fondo se repita.

Finalmente, todo lo que viene después de la coma es una segunda declaración de antecedentes. Esta vez solo establecemos el color de fondo en var (color primario)

Vaya, eso es una variable.

La implicación de esto es que tienes que definir la variable. Así es cómo:

: root {
  - color primario: rgba (241,196,15, 1)
}

El color primario allí es el color amarillo del amanecer. No es gran cosa. Estableceremos algunas variables más allí pronto.

Ahora, centremos los cuadros de colores

main.booth {
  altura mínima: 100vh;
  
  pantalla: flex;
  justify-content: centro;
  alinear elementos: centro;
}

El contenedor principal actúa como contenedor flexible y coloca correctamente al hijo directo en el centro de la página. Este es nuestro querido contenedor de caja de color

Hagamos bonito el contenedor de cajas de colores y sus elementos secundarios.

Primero, los elementos secundarios:

.caja de color {
  acolchado: 1rem 3.5rem;
  margen inferior: 0.5rem;
  borde: 1px rgba sólido (255,255,255,0.2);
  radio de borde: 0.3rem;
  box-shadow: 10px 10px 30px rgba (0,0,0,0.4);
}

Eso lo hará. También hay una hermosa sombra añadida. Eso nos dará algunos efectos geniales.

Eso no es todo. Vamos a diseñar el contenedor total de cajas de contenedores:

/ * Cajas de colores * /
.color-boxes {
  fondo: var (- color secundario);
  box-shadow: 10px 10px 30px rgba (0,0,0,0.4);
  radio de borde: 0.3rem;
  
  transformar: perspectiva (500 px) rotar Y (calc (var (- deslizador) * 1deg));
  transición: transformar 0.3s
}

¡Oh mi!

Hay mucho ahí dentro.

Déjame desglosarlo.

Aquí está el bit simple:

.color-boxes {
   fondo: var (- color secundario);
   box-shadow: 10px 10px 30px rgba (0,0,0,0.4);
   radio de borde: 0.3rem;
}

Sabes lo que hace, ¿eh?

Hay una nueva variable allí. Eso debería eliminarse agregándolo al selector de raíz.

: root {
  - color primario: rgba (241,196,15, 1);
  - color secundario: rojo;
}

El color secundario es el rojo. Esto le dará al contenedor un fondo rojo.

Ahora a la parte que probablemente te confundió:

/ * Cajas de colores * /
.color-boxes {
  transformar: perspectiva (500 px) rotar Y (calc (var (- deslizador) * 1deg));
  transición: transformar 0.3s
}

Por un momento, podríamos simplificar el valor de la propiedad de transformación anterior.

Por ejemplo:

transformar: perspectiva (500 px) rotar Y (30 grados);

La taquigrafía de transformación aplica dos funciones diferentes. Uno, la perspectiva, y el otro, la rotación a lo largo del eje Y.

Hmmm, entonces, ¿cuál es el trato con la perspectiva y las funciones de rotación?

La función perspectiva () se aplica a un elemento que se está transformando en el espacio 3D. Activa el espacio tridimensional y le da profundidad al elemento a lo largo del eje z.

Puedes leer más sobre la función de perspectiva en codrops.

La función rotar, ¿cuál es el problema con eso?

Al activar el espacio 3d, el elemento tiene los planos x, y, z. La función rotateY gira el elemento a lo largo del plano Y.

El siguiente diagrama de codrops es realmente útil para visualizar esto.

Codrops

Espero que eso haya liberado parte del vapor.

De vuelta a donde empezamos.

Cuando mueve el control deslizante, ¿sabe qué función afecta la rotación de .container-box?

Se invoca la función rotar. La caja gira a lo largo del eje Y.

Dado que el valor pasado a la función rotateY se actualizará a través de JavaScript, el valor se representa con una variable.

Entonces, ¿por qué multiplicar por la variable por 1 grado?

Como regla general, y para una libertad explícita, se recomienda que al construir tokens individuales, almacene valores en sus variables sin unidades.

Puede convertirlos a cualquier unidad que desee haciendo una multiplicación a través de la función calc.

Esto le permite hacer "lo que quiera" con estos valores cuando los tenga. Si desea convertir a grados o como proporción de la ventana gráfica del usuario vw, puede hacer lo que quiera.

En este caso, estamos convirtiendo el número para tener un grado multiplicando el valor del "número" por 1 grado

Como CSS no comprende las matemáticas, debe pasar esta aritmética a la función de cálculo para que CSS la evalúe correctamente.

Una vez hecho esto, estamos listos para comenzar. El valor de esta variable se puede actualizar en JavaScript tanto como queramos.

Ahora, solo queda un poco de CSS.

Aquí está:

/ * Manejar colores para cada cuadro de color * /
.color-box: nth-child (1) {
  fondo: var (- bg-1)
}
.color-box: nth-child (2) {
  fondo: var (- bg-2)
}
.color-box: nth-child (3) {
  fondo: var (- bg-3)
}
.color-box: nth-child (4) {
  fondo: var (- bg-4)
}
.color-box: nth-child (5) {
  fondo: var (- bg-5)
}
.color-box: nth-child (6) {
  fondo: var (- bg-6)
}

Entonces, ¿qué es este vudú?

Primero, el enésimo selector secundario selecciona cada uno de los cuadros secundarios.

Aquí se necesita un poco de previsión. Sabemos que actualizaremos el color de fondo de cada cuadro. También sabemos que este color de fondo debe estar representado por una variable para que sea accesible a través de JavaScript. ¿Correcto?

Podríamos seguir adelante y hacer esto:

.color-box: nth-child (1) {
  fondo: var (- bg-1)
}

Fácil.

Sin embargo, hay un problema. Si esta variable no está presente, ¿qué sucede?

Necesitamos una reserva.

Esto funciona:

.color-box: nth-child (1) {
  fondo: var (- bg-1, rojo)
}

En este caso particular, he elegido NO proporcionar ningún retroceso.

Si una variable utilizada dentro de un valor de propiedad no es válida, la propiedad tomará su valor inicial.

En consecuencia, cuando --bg-1 no es válido o NO está disponible, el fondo tendrá el valor inicial de transparente de forma predeterminada.

Los valores iniciales se refieren a los valores de una propiedad cuando no se establecen explícitamente. Por ejemplo, si no establece el color de fondo de un elemento, el valor predeterminado será transparente

Los valores iniciales son una especie de valores de propiedad predeterminados.

Vamos a escribir algo de JavaScript

Es muy poco lo que tenemos que hacer en el lado de JavaScript.

Primero manejemos el control deslizante.

¡Solo necesitamos 5 líneas para eso!

const root = document.documentElement
const range = document.querySelector ('. booth-slider')

// a medida que cambia el valor del rango del control deslizante, haga algo
range.addEventListener ('input', handleSlider)

función handleSlider (e) {
  let value = e.target.value
  root.style.setProperty ('- deslizador', valor)
}

Eso fue fácil, ¿eh?

Déjame explicarte por si te perdí.

En primer lugar, mantenga una referencia al elemento deslizante, const range = document.querySelector ('. Booth-slider')

Configure un detector de eventos para cuando cambie el valor de la entrada de rango, range.addEventListener ('input', handleSlider)

Escriba la devolución de llamada, handleSlider

función handleSlider (e) {
  let value = e.target.value
  root.style.setProperty ('- deslizador', valor)
}

root.style.setProperty ('- slider', value) dice, obtenga el elemento raíz (HTML), tome su estilo y establezca una propiedad en él.

Manejando los cambios de color

Esto es tan fácil como manejar el cambio de valor del control deslizante.

Así es cómo:

const input = document.querySelectorAll ('. color-box> input')
// a medida que cambia el valor en la entrada, haga algo.
inputs.forEach (input => {
  input.addEventListener ('input', handleInputChange)
})

función handleInputChange (e) {
  let value = e.target.value
  let inputId = e.target.parentNode.id
  let inputBg = `--bg - $ {inputId}`
  root.style.setProperty (inputBg, value)
}

Mantenga una referencia a todas las entradas de texto, const input = document.querySelectorAll ('. Color-box> input')

Configure un detector de eventos en todas las entradas:

inputs.forEach (input => {
   input.addEventListener ('input', handleInputChange)
})

Escriba la función handleInputChange:

función handleInputChange (e) {
  let value = e.target.value
  let inputId = e.target.parentNode.id
  let inputBg = `--bg - $ {inputId}`
  root.style.setProperty (inputBg, value)
}

Uf…

¡Eso es!

Proyecto hecho.

¿Cómo extrañé esto?

Había completado y editado el borrador inicial de este artículo cuando noté que no mencioné el soporte del navegador en ningún lado. Entonces, déjame arreglar mi desastre.

La compatibilidad del navegador para las variables CSS (también conocidas como propiedades personalizadas) no está nada mal. Es bastante bueno, con un soporte decente en todos los navegadores modernos (más del 87% al momento de escribir este artículo).

Puedo usar

Entonces, ¿puedes usar variables CSS en producción hoy? ¡Diré que sí! Sin embargo, asegúrese de verificar cuál es la tasa de adopción para usted.

En el lado positivo, puede usar un preprocesador como Myth. Preprocesará su CSS "futuro" en algo que usa hoy. Que genial, ¿eh?

Si tiene algo de experiencia en el uso de postCSS, esa es igualmente una excelente manera de usar CSS en el futuro hoy. Aquí hay un módulo postCSS para variables CSS.

Eso es. Ya terminé aquí.

¡Vaya, pero tengo preguntas!

Obtenga el Ebook para leer sin conexión, y también obtenga una invitación privada privada donde puede preguntarme cualquier cosa.

Eso es un trato justo, ¿verdad?

¡Te veo luego!