Forem

Cover image for Usar variables en css
Roberto Morais
Roberto Morais

Posted on

Usar variables en css

Introducción

Hace un tiempo que los ficheros css permiten gestionar valores de la estética de la web mediante variables. Esas variables se pueden definir en otro fichero css, como por ejemplo en variables.css, o en el propio fichero css en el que tenemos todo el estilo de nuestra web.

Da igual como decidamos hacerlo porque el funcionamiento será el mismo.

Código

Todas nuestras variables deben estar encapsuladas dentro de la etiqueta :root y precedidas por --, quedando de la siguiente manera:

:root {
  --main-bg-color: #0000
}
Enter fullscreen mode Exit fullscreen mode

Esta etiqueta root siempre debe estar antes del código css en el que usaremos las variables, esto quiere decir que si lo importamos en el HEAD de nuestra web, se debe importar antes que el fichero css en el que se usarán las variables:

<link rel="stylesheet" href="variables.css">
<link rel="stylesheet" href="mystyle.css">
Enter fullscreen mode Exit fullscreen mode

Otra forma es usando en @import dentro de nuestro mystyle.css:

@import 'variables.css';
Enter fullscreen mode Exit fullscreen mode

Si en nuestro caso no queremos tener dos ficheros y únicamente usar el mystyle.css las primeras líneas de ese fichero deben ser la etiqueta :root, quedado de la siguiente manera:

:root {
  --main-bg-color: #0000
}

.fondo {
  background-color: var(--main-bg-color);
}
Enter fullscreen mode Exit fullscreen mode

Conclusión

Si no queremos usar scss u otros sistemas de estilos con más funcionalidad o queremos hacer más fácil trabajar con ficheros css muy largos y en los que para cambiar un color se deben editar varias etiquetas, debes usar variables y verás como la complejidad a la hora de editar el estilo de tu web es mucho más sencillo.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay