La función var() es usada para insertar el valor de una variable CSS. Las variables CSS tienen acceso al DOM, lo que significa que puede crear variables con alcance local o global, cambiar las variables con JavaScript y cambiar las variables en función de las consultas de medios. Una buena manera de usar las variables CSS es cuando se trata de los colores de tu diseño. En lugar de copiar y pegar los mismos colores una y otra vez, puede colocarlos en variables.
La manera tradicional
El siguiente ejemplo muestra la forma tradicional de definir algunos colores en una hoja de estilo (definiendo los colores a usar, para cada elemento específico).
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #1e90ff;
}
h2 {
border-bottom: 2px solid #1e90ff;
}
.container {
color: #1e90ff;
background-color: #ffffff;
padding: 15px;
}
button {
background-color: #ffffff;
color: #1e90ff;
border: 1px solid #1e90ff;
padding: 5px;
}
</style>
</head>
<body>
<h1>The Traditional Way</h1>
<div class="container">
<h2>Lorem Ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper
diam at erat pulvinar, at pulvinar felis blandit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper
diam at erat pulvinar, at pulvinar felis blandit.
</p>
<p>
<button>Yes</button>
<button>No</button>
</p>
</div>
</body>
</html>
Sintaxis de la función var()
La función var() se usa para insertar el valor de una variable CSS. La sintaxis de la función var() es la siguiente.
var(--nombre, valor)
| Valor | Descripción |
|---|---|
| name | Requerido. El nombre de la variable (debe comenzar con dos guiones) |
| value | Opcional. El valor alternativo (utilizado si no se encuentra la variable) |
Nota: El nombre de la variable debe comenzar con dos guiones (–) y distingue entre mayúsculas y minúsculas (es case sensitive).
Como trabaja var()
En primer lugar, las variables CSS pueden tener un alcance global o local. Las variables globales se pueden acceder/usar a través de todo el documento, mientras que las variables locales se pueden usar solo dentro del selector donde se declara. Para crear una variable con alcance global, declárala dentro del selector :root. El selector :root coincide con el elemento raíz del documento. Para crear una variable con alcance local, declárala dentro del selector que la va a usar. El siguiente ejemplo es igual al ejemplo anterior, pero aquí usamos la función var(). Primero, declaramos dos variables globales (–blue y —white). Luego, usamos la función var() para insertar el valor de las variables más adelante en la hoja de estilo.
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<style>
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h1 {
color: var(--white);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
</style>
</head>
<body>
<h1>Usando la función var()</h1>
<div class="container">
<h2>Lorem Impsum</h2>
<p>Algo de texto escrito</p>
<p>Más texto escrito</p>
<button>Yes</button>
<button>No</button>
</div>
</body>
</html>
Las ventajas de usar var() son:
- Hace el código más fácil de leer.
- Hace mucho más fácil cambiar el valor de los colores.