Variables con CSS

Variables con CSS

Hablar de usar variables en tu código CSS, sonaba a que se estaba usando SASS. ¿Qué es SASS? SASS es un preprocesador que te permite escribir pseudocódigo CSS de una forma rápida y que luego será convertido en código CSS.

Actualmente el uso de variables en código CSS es una realidad y evita tener que volver a mirar repetidamente alguna características como colores de fondo, colores de bordes,... que recuerdas cual has utilizado y que utilizas en tu proyecto bastantes veces.

Variables con CSS

¿Cómo definimos una variable?

Como consejo yo definiría en el atributo :root todas las variables, ya que haciéndolo así, quedan definidas en todo nuestro trabajo.

El nombre de la variable va precedido de "--" y es como se definiéramos una propiedad CSS.

Veamos un ejemplo:

                 :root{

--colorFondo: rgba(255, 153, 153, 0.4);

                          }

Variables con CSS

¿Cómo uso una variable?

Una vez que tenemos definida una variable ya la podemos usar en nuestro código CSS donde queramos.

Tendremos que usar la variable precedida de la palabra var y entre paréntesis () el nombre de la variable.

Veamos un ejemplo:

                 .fondoPrincipal{

background-color: var(--colorFondo);

                          }

Variables con CSS

veamos un ejemplo

https://codepen.io/bermartinv/pen/zRwpBr

Variables con CSS

Enlaces consultados y de interes

• https://caniuse.com/#feat=css-variables
• https://developer.mozilla.org/es/docs/Web/CSS/Using_CSS_variables
• https://css-tricks.com/difference-between-types-of-css-variables/