CSS | Variables : En este tutorial, vamos a aprender acerca de las variables en CSS , cómo crear las variables, cómo usarlos, etc.
CSS | Variables
las variables CSS le permiten crear valores reutilizables que se pueden utilizar en todo un documento CSS. variables de CSS
En CSS variable de , la función var () permite acceder.
class ejemplo , en el CSS es muy común que volver a utilizar un solo color o tamaño de texto a través del código, esto significaría la reutilización del mismo color o valor de texto de tamaño varias veces a través de un documento. Con las variables CSS el valor de color o tamaño de texto se puede asignar a una variable y se utiliza en varios lugares. Esto hace más fácil el cambio de valores y es más conveniente que usar valores CSS tradicionales.
Nota: Las variables deben ser declaradas en un selector CSS que define los variables de alcance. En el ámbito global, se puede utilizar el: raíz o el selector cuerpo .
El nombre de la variable debe comenzar con dos guiones (- ), también el nombre de la variable es For sensible.
variables de CSS | Válidos / Inválidos
Al asignar nombres a las variables CSS, que contiene sólo letras y guiones al igual que otras propiedades CSS pero debe comenzar con guiones class ( – ).
//These are Invalids variable names
--123color: blue;
--#color: red;
--$width: 100px;
//Valid variable names
--color: red;
--bg-color: yellow ;
--width: 100px;
Propiedades de la variable
- de color variable
- variable dimensión
- cascada variable
Echemos un vistazo a cada propiedad más de cerca …
a) de color variable
Este propiedad nos permite reutilizar un solo color en todo el código. Las variables CSS el valor de color se puede asignar a una variable y se utiliza en varios lugares.
Sintaxis:
Element {
--main-bg-color: coral;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--primary-color: blue;
}
#div1 {
background-color: var(--primary-color);
padding: 5px;
}
#div2 {
background-color: var(--primary-color);
padding: 10px;
}
#div3 {
background-color: var(--primary-color);
padding: 15px;
}
</style>
</head>
<body>
<div id="div1"> Variables in CSS.</div>
<br>
<div id="div2">Variables in CSS.</div>
<br>
<div id="div3">Variables in CSS.</div>
</body>
</html>
salida
En el ejemplo anterior, hemos reutilizado de color azul en tres elemento de división.
b) Dimensiones variables
Esta propiedad nos permite reutilizar algunos pares de dimensiones en todo el código.
Sintaxis:
Element {
--W200: 200px;
--W10: 10px;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--W200: 200px;
--W10: 10px;
}
#div1 {
width: var(--W200);
margin: var(--W10);
padding: 5px;
}
#div2 {
width: var(--W200);
margin: var(--W10);
padding: 10px;
}
</style>
</head>
<body>
<div id="div1">Variables in CSS.</div>
<br>
<div id="div2">Variables in CSS.</div>
<br>
</body>
</html>
salida
En el ejemplo anterior, las mismas dimensiones se utilizan tanto en las divisiones.
c) en cascada Variable
Variables en CSS cascada en la misma manera que otras propiedades, y se pueden reutilizar de forma segura.
Puede definir variables múltiples veces y sólo la definición con la mayor especificidad se aplicará al elemento seleccionado.
Sintaxis:
Element {
--color: green;
border: 1px solid var(--color);
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
--color: green;
border: 1px solid var(--color);
color: var(--color);
}
.button:hover {
--color: blue;
}
.button_red {
--color: red;
}
</style>
</head>
<body>
<a class="button">Button Green</a>
<a class="button button_red">Button Red</a>
<a class="button">Button Hovered On</a>
</body>
</html>
salida
En el ejemplo anterior, si Pase el ratón sobre el último botón el color cambia a azul.