CSS permite poner variables en el código raíz y poder acceder a estas fácilmente, en especial cuando tenemos que cambiar el tamaño de fuente, colores, bordes entre otros, como se hace en lenguajes como sass, scss o less:
Ejemplo de texto en HTML
<h1>Variables en CSS</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus enim quibusdam dolore quasi numquam ratione. Autem sint necessitatibus quam. Minus veritatis maiores officia quia hic provident necessitatibus eveniet reprehenderit ipsam.</p>
<p>Enim incidunt esse quis earum voluptates nihil fuga nostrum? Perspiciatis facilis quaerat adipisci officiis corrupti vitae quos aspernatur sapiente ducimus? Ipsam fugit, eligendi et ea labore ut quod voluptates est.</p>
<p>Quas eos, iure praesentium aliquid porro facilis maxime. Excepturi suscipit optio, ducimus totam odio, nisi quidem cum earum accusamus sed minima? Tempora corrupti aliquid maxime deserunt esse aspernatur omnis consectetur.</p>Ejemplo de variables en CSS
root {
--b: #1888F6;
--c: #1F4787;
--text: 28px;
--title: 46px;
}
h1{
color: var(--b);
font-size: var(--title);
}
p{
color: var(--c);
font-size: var(--text);
}Ejemplo en línea para verificar su funcionamiento:
See the Pen variables CSS by Carlos Alberto Carvajal (@cardex107) on CodePen.