Una hoja de referencia para ayudarlo a recordar las propiedades personalizadas de CSS

Las propiedades personalizadas de CSS, también conocidas como variables CSS, representan propiedades personalizadas que pueden declararse y llamarse en su CSS.

Declarar una propiedad personalizada en CSS

Para declarar una propiedad personalizada en su CSS, debe usar la --sintaxis:

:root { --colorPrimary: hsla(360, 100%, 74%, 0.6); }

Observe el :rootselector de pseudoclases: podemos declarar nuestras variables globalmente usándolo. También podemos declararlos usando otros selectores, y luego se incluirán en ellos.

.theme-dark { --colorPrimary: hsla(360, 100%, 24%, 0.6); }

Usar una propiedad personalizada en CSS

Para usar una propiedad personalizada de CSS en su CSS, puede usar la var()función:

:root { --colorPrimary: tomato; } .theme-dark { --colorPrimary: lime; } body { background-color: var(--colorPrimary); }

En este caso, bodytendrá un color de fondo de tomato, pero un body.theme-darkde lime.

Utilice propiedades personalizadas sin unidades

Las propiedades personalizadas de CSS se pueden declarar sin unidades si se utilizan con la calc()función.

:root { --spacing: 2; } .container { padding: var(--spacing) px; /*Doesn't Work ?*/ padding: calc(var(--spacing) * 1rem); /*Will output 2rem ?*/ }

Usar propiedades personalizadas con JavaScript

Para obtener una propiedad personalizada, podemos usar lo siguiente:

getComputedStyle(element).getPropertyValue("--my-var"); // Or if inline element.style.getPropertyValue("--my-var");

Para actualizar el valor de la propiedad personalizada:

element.style.setProperty("--my-var", newVal);

Ejemplo de obtención y sustitución de valores:

En el siguiente ejemplo, usamos la biblioteca del controlador dat.gui para cambiar el valor de las propiedades personalizadas --scenePerspective, --cubeRotateY y --cubeRotateX. Este método facilita la aplicación de un nuevo estilo, ya que no es necesario aplicar un estilo en línea en cada elemento DOM.

¡Gracias por leer!

Recursos

Definición de propiedades personalizadas: la - * familia de propiedades

Propiedades personalizadas: variables CSS - MDN

var () - MDN

Uso de propiedades personalizadas de CSS (variables) - MDN

Puedes leer más de mis artículos en mi blog.