En CSS es posible generar variables que nos permitan utilizar esos valores para diferentes usos en nuestros documentos de estilos. Si guardamos un valor, estamos evitando repetir código, lo que trae beneficios a la hora de mantener el código y el rendimiento de carga.
Sintaxis para generar variables en CSS
:root { --primary-color: black;}Luego, invocamos la variable en el elemento donde se necesite.
Ejemplo
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Variables</title> <style> :root{ --primary-color: #003476; --secundary-color: royalblue; --header-size: 4rem; --font: 1.8rem; } *{ box-sizing: border-box; margin: 0; padding: 0; } html{ font-size: 62.5%; } body{ font-size: 1.6rem; } header{ width: 100vw; height: 15vh; background-color: var(--primary-color); } main { width: 100vw; height: 70vh; font-size: var(--font); } h1 { font-size: var(--header-size); color: var(--primary-color); } footer{ width: 100vw; height: 15vh; background-color: var(--secundary-color); } </style></head><body> <header></header> <section> <main> <h1>Soy un título de ejemplo</h1> <section> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel tempora dicta earum dignissimos voluptatum totam eius assumenda dolorem, deserunt nulla corporis itaque aliquam minus, libero asperiores sint, explicabo quis consequuntur.</p> </section> </main> </section> <footer></footer></body></html>Dentro de la declaración CSS :root{}, colocamos las variables que vamos a utilizar en el documento entero. Recordemos que “root” hace referencia al elemento raíz de la página web, es decir al html.