¿Cómo se definen y se utilizan las variables CSS con la sintaxis --nombre-variable y var()?
Aprende la sintaxis para definir variables CSS (--nombre: valor;) y usarlas con la función var(--nombre, fallback) para código reutilizable.
Las variables CSS, conocidas oficialmente como «propiedades personalizadas» (Custom Properties), se definen y utilizan con una sintaxis específica:
1. Definición (Declaración de la variable):
Las variables CSS se declaran utilizando un nombre que comienza con dos guiones (--), seguido del nombre que elijas para tu variable y, a continuación, dos puntos y el valor que deseas asignarle.
Es una práctica común definirlas dentro del pseudo-selector :root, que representa el elemento raíz del documento (normalmente <html>), para que tengan un alcance global. Sin embargo, también pueden definirse dentro de selectores más específicos para limitar su alcance.
:root {
--color-primario: #3498db; /* Un color azul */
--tamano-fuente-base: 16px;
--espaciado-estandar: 10px;
--fuente-principal: "Helvetica Neue", Arial, sans-serif;
}
Lenguaje del código: PHP (php)Los nombres de las variables son sensibles a mayúsculas y minúsculas (--MiColor es diferente de --micolor).
2. Uso (Invocación de la variable):
Para utilizar el valor almacenado en una variable, se emplea la función var(). Dentro de los paréntesis de var(), se coloca el nombre de la variable que quieres usar.
body {
font-family: var(--fuente-principal);
font-size: var(--tamano-fuente-base);
color: #333;
}
.boton {
background-color: var(--color-primario);
color: white;
padding: var(--espaciado-estandar);
border: none;
}
.alerta {
/* Usando un valor de respaldo: si --color-alerta no está definido, se usará 'red' */
background-color: var(--color-alerta, red);
padding: var(--espaciado-estandar);
}
Lenguaje del código: PHP (php)La función var() también puede aceptar un segundo argumento opcional, que actúa como un valor de respaldo (fallback). Este valor se utilizará si la variable CSS especificada no está definida.
Las variables CSS respetan la cascada y la herencia, lo que significa que puedes redefinir una variable dentro de un selector más específico para cambiar su valor solo para ese elemento y sus descendientes.
