DEV Community

Cover image for Variables en CSS
Danniel Navas
Danniel Navas

Posted on

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;
    }
Enter fullscreen mode Exit fullscreen mode
  1. Utilización:
    .nav{
        background-color: var(--five-color);
    }
    h2{
        font-family: var(--font-title);
    }
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (2)

Collapse
 
jlrxt profile image
Jose Luis Ramos T.

Muy útil.gracias por compartir.

Collapse
 
dannieldev profile image
Danniel Navas

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