En este post te presentamos cómo utilizar las variables y cálculos en CSS para hacer que los cambios de estilo en tu proceso de diseño sean más eficientes, ya que es muy probable que en el proceso de diseño de tu página web cambies de opinión sobre los tamaños de tus elementos. Aunque esto es normal, cada cambio de tamaño en un elemento puede afectar las posiciones, propiedades y tamaños de muchos otros elementos. Esto hace que cada vez que cambiemos un solo dato en un solo elemento, tengamos que ajustar todos los demás elementos a la nueva composición. Por eso son tan importantes las variables y cálculos en CSS.
Variables en CSS
Las variables en CSS son una forma de determinar estilos bajo la etiqueta var. El lugar más habitual para definir variables suele ser el elemento root en el documento raíz. Esto se hace para que la variable sea accesible desde todo sitio. Podemos definir estilos como variables en CSS usando la siguiente nomenclatura:
–nombre de la variable: valor
Una vez definido el estilo en el elemento root, podemos usar la variable en nuestro documento CSS utilizando la etiqueta var. Entonces, en vez de insertar una propiedad o estilo directamente a un elemento HTML, lo que hacemos es insertar esta etiqueta y, entre paréntesis, el nombre de la variable definida en el elemento root.
Para comprenderlo, te proponemos un ejemplo. Si quisiéramos que nuestra variable fuera un color red, escribiríamos lo siguiente en el elemento root:
:root { –color-principal: #f00; }
Puedes cambiar el nombre «–color-principal» por cualquier nombre que te recuerde a la variable que quieres crear. Como siempre, te recomendamos utilizar nombres que tengan sentido con el propósito del elemento o propiedad, pero tú puedes encontrar el sistema que te funcione. Lo importante es que uses el mismo nombre de la variable cuando la vayas a insertar. Una vez creada esta variable en el documento raíz, la insertamos usando la etiqueta var de la siguiente manera:
{color: var (–color-principal);}
Insertar propiedades a través de las variables nos permite cambiar las especificaciones de un estilo desde el elemento raíz y, automáticamente, cambiarlo en todos los lugares en los que esté insertado. Así que podríamos escribir estas variables en nuestro documento de CSS global o podríamos incluso crear un nuevo archivo con todas nuestras variables. Esto haría más fácil la transformación de la página web en equipo, pues podemos darle el archivo de variables a otro programador para que los cambios que realice se apliquen a toda nuestra página web. Por ello, te recomendamos hacer que tus variables sean los datos que más tienden a cambiar y de los cuáles dependen muchos otros elementos.
Cálculos en CSS
Otra ventaja de usar variables y cálculos en CSS es que las variables pueden insertarse en nuestros cálculos para que se vuelvan flexibles. Para crear cálculos en CSS, utilizamos la función calc. Puedes leer sobre esta variable con más detalle en la página oficial de Mozilla Developer Network. En términos generales, esta función nos permite realizar cálculos (suma, resta, multiplicación y división) para determinar el valor de una propiedad. Es particularmente útil para determinar valores que dependen de otros elementos, pues el navegador ajustará la propiedad a los cambios que tengan. Podemos unir las variables y cálculos en CSS para transformar nuestra página web con pocos cambios.
Podemos, por ejemplo, crear una variable con el número 20 y, después, utilizar este número para hacer cálculos en distintos elementos. Lo bueno de poner un número sin medida en la variable es que el resultado del cálculo será flexible y se guiará por la unidad de medida del cálculo. Entonces, podríamos utilizar esta variable para determinar la separación entre elementos. Podríamos utilizar esta combinación de variables y cálculos en CSS si queremos, por ejemplo, que la separación entre las secciones sea el doble que la separación entre los párrafos.
¿Qué sigue?
Ahora que conoces cómo funcionan las variables y cálculos en CSS, ¡ha llegado el momento de que los pongas en práctica en tu propia página web! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, donde, entre muchas otras cosas, continuarás aprendiendo sobre CSS y diseñarás tu propia página web con ayuda de nuestros profesores. ¡Anímate a matricularte!
