Las variables en CSS, también conocidas como propiedades personalizadas, se utilizan para almacenar valores específicos para reutilizarlos en toda la hoja de estilo. Esto puede ahorrar tiempo y ayudar a mantener el código más organizado y fácil de mantener.
Aquí te muestro cómo puedes utilizar variables en CSS.
Primero define la variable con un nombre y un valor:
```css
:root {
—color-principal: #36f;
}
```
El selector `:root` define la variable a nivel global. `—color-principal` es el nombre de la variable que elegimos y `#36f` es el valor que le asignamos.
Después usa `var()` para utilizar la variable. En este ejemplo, cambiamos el color del texto a todos los párrafos.
```css
p {
color: var(—color-principal);
}
```
Esto hará que todos los párrafos tengan un color de texto de `#36f`. Si alguna vez quieres cambiar el color, solo necesitas cambiar el valor de la variable y se actualizará en todas partes donde se utilice esa variable.
Además, también puedes establecer las variables dentro de los selectores de elementos o id’s, en lugar de `:root`, esto hará que el ámbito de la variable sea solo dentro de ese selector.
