Variables en CSS

Una de las ventajas que nos trae CSS para los que hemos desarrollado Backend es la utilización de las variables.

Como utilizarlas:

En root declararemos las variables toda la paleta de colores de nuestra aplicación la cual reutilizaremos en muchas partes y con esto si queremos cambiar el esquema solo sera realizarlo en nuestra definición y el cambio estará realizado.

Ejemplo:

1. Declaración:

    :root{
        --main-color: #051937;
        --second-color:  #133660;
        --thir-color: #1d578d;
        --four-color: #1f7abb;
        --five-color: #4db6ac;

        --font-title: 'Pacifico', cursive;
    }

1. Utilización:

    .nav{
        background-color: var(--five-color);
    }
    h2{
        font-family: var(--font-title);
    }

Y de esta forma declaramos no solo los colores si no las fuentes que utilizamos y eso seria todo, utiliza esto en tus próximos proyectos y veras lo útil que es para realizar tu proyecto Frontend.

Comments

[Jose Luis Ramos T.]

Muy útil.gracias por compartir.

[Danniel Navas]

Jose, a ti muchas gracias por tomarte el tiempo de leer.