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 :root
selector 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, body
tendrá un color de fondo de tomato
, pero un body.theme-dark
de 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.