La función var() se utiliza para insertar el valor de un Variables CSS.
Las variables CSS tienen acceso al DOM, lo que significa que puedes crear variables con alcance local o global, cambiar las variables con JavaScript y cambie las variables según las consultas de medios.
Una buena forma de utilizar 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, puedes colocarlos en variables.
El siguiente ejemplo muestra la forma tradicional de definir algunos colores en una hoja de estilo. (definiendo los colores a utilizar, para cada elemento específico):
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;
} Pruébelo usted mismo →
<!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>
var()La función var() se utiliza para insertar el valor de un Variables CSS.
La sintaxis de la función var() es la siguiente:
var(--name, value)Requerido. El nombre de la variable (debe comenzar con dos guiones)
Opcional. El valor de reserva (usado 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.
var()En primer lugar: las variables CSS pueden tener un alcance global o local.
Se puede acceder/utilizar las variables globales a través de todo el documento, mientras que Las variables locales solo se pueden usar dentro del selector donde se declaran.
Para crear una variable con alcance global, declararla dentro de :root selector. El selector :root coincide con el elemento raíz del documento.
Para crear una variable con alcance local, declararla dentro del selector que la va a utilizar.
El siguiente ejemplo es igual al ejemplo anterior, pero aquí usamos la función var().
Primero, declaramos dos variables globales (--blue y --white). Luego, utilizamos el Función var() para insertar el valor de las variables más adelante en la hoja de estilo:
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body { background-color: var(--blue); }
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;
} Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
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>Using the var() Function</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>
Las ventajas de utilizar var() son:
hace que el código sea más fácil de leer (más comprensible)
hace que sea mucho más fácil cambiar los valores de color
Para cambiar el color azul y blanco a un azul y blanco más suave, sólo necesitas para cambiar los dos valores de las variables:
:root {
--blue: #6495ed;
--white: #faf0e6;
}
body { background-color: var(--blue); }
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;
} Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--blue: #6495ed;
--white: #faf0e6;
}
body {
background-color: var(--blue);
}
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>Using the var() Function</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>
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con Función var().
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
Inserta el valor de una variable CSS