Las variables en CSS

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

  1. de color variable
  2. variable dimensión
  3. 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

Variables in CSS - 4

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

Variables in CSS - 5

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

Variables in CSS - 6

En el ejemplo anterior, si Pase el ratón sobre el último botón el color cambia a azul.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *