Expresiones en CSS: Números, Strings, Colores y Booleanos

Cuando trabajas con Sass, uno de los conceptos más poderosos que debes dominar son las expresiones. Aunque probablemente ya las has utilizado sin darte cuenta, entender qué son y cómo funcionan te permitirá escribir estilos más flexibles y reutilizables en tus proyectos.

¿Qué es una expresión en Sass?

Una expresión es todo aquello que va del lado derecho de una variable [0:12]. A diferencia de un valor CSS convencional, las expresiones en Sass son mucho más versátiles porque pueden pasarse como argumentos a funciones y mixins, lo que amplía considerablemente las posibilidades de tu código.

Existen varios tipos de expresiones literales que puedes utilizar:

• Números: valores numéricos que pueden incluir unidades de medida.
• Strings: cadenas de texto, como nombres de tipografías.
• Colores: representados en distintos formatos como hexadecimal, RGB o RGBA.
• Booleanos: los valores true y false.
• Null: un tipo de dato que representa la ausencia de valor.
• Listas y mapas: estructuras más complejas para agrupar datos [1:00].

¿Cómo se usan las expresiones de color y números en un proyecto real?

Dentro de un proyecto en Visual Studio Code, las expresiones aparecen de forma natural al definir variables. Por ejemplo, al declarar colores se utilizan expresiones de color pasando un código hexadecimal [1:22]. Para definir un font stack, se recurre a expresiones de tipo string que indican la tipografía deseada, como sans-serif [1:33].

Los números también son expresiones y pueden incluir distintas unidades de medida [1:47]:

• Píxeles (px) para medidas absolutas.
• Porcentaje (%) para establecer proporciones de la pantalla.
• Unidades responsivas como vh (view height) y vw (view width).

Esta flexibilidad permite adaptar los estilos a diferentes contextos de diseño sin cambiar la estructura del código.

¿Es posible cambiar el formato de color sin romper el proyecto?

Sass acepta múltiples formatos de color de manera intercambiable. Si inicialmente defines una variable con un valor hexadecimal, puedes reemplazarlo por un valor en RGB y el archivo seguirá siendo completamente compatible [2:13]. Incluso es posible utilizar RGBA, que añade un canal de transparencia al color [2:38].

Por ejemplo, al modificar una variable de color y ejecutar el comando de compilación de Sass, el proyecto refleja los cambios sin errores [2:56]. Esto demuestra que las expresiones de color son flexibles: puedes elegir el formato que mejor se adapte a las necesidades de tu diseño.

scss // Hexadecimal $color-primary: #3498db;

// RGB $color-primary: rgb(52, 152, 219);

// RGBA con transparencia $color-primary: rgba(52, 152, 219, 0.8);

¿Qué expresiones conviene utilizar en cada caso?

La elección del tipo de expresión depende del contexto de tu proyecto. Los hexadecimales son compactos y ampliamente usados. El formato RGB resulta más legible cuando necesitas ajustar valores individuales de rojo, verde y azul. Y RGBA es ideal cuando requieres controlar la opacidad de un elemento.

En cuanto a los números, usar unidades relativas como porcentajes o vw facilita la creación de diseños responsivos, mientras que los píxeles ofrecen precisión en componentes que necesitan medidas fijas.

Ahora que conoces los distintos tipos de expresiones disponibles en Sass, puedes combinarlas según lo que cada parte de tu proyecto requiera. ¿Has experimentado con formatos de color diferentes en tus variables? Comparte tu experiencia.