Trabajando estilos con SASS

Para quienes han trabajado con CSS, es sabido que mantener los estilos en aplicaciones y sitios web a medida que crecen puede ser complicado. Con la popularidad de los dispositivos móviles, la tarea se ha vuelto aún más desafiante. Aquí es donde entra SASS (Syntactically Awesome Stylesheets), una herramienta que surge como solución a estos problemas. SASS "extiende CSS, proporcionando varios mecanismos presentes en lenguajes de programación tradicionales, particularmente los orientados a objetos, pero que aún no están disponibles en CSS3."

En este artículo, me enfocaré en algunos de los usos específicos que más utilizo con SASS. Aunque existen muchas otras ventajas que ofrece esta herramienta, las exploraremos en futuras entradas.

Definición de Variables

En nuestros archivos CSS, es común encontrarse con colores, tamaños, anchos y alturas repetidos en diversas partes del código. ¿Por qué no definir nuestras propias variables para evitar la redundancia? Un uso común de las variables sería para definir los colores de un sitio.

Por ejemplo:

Estas variables se pueden usar luego para asignar colores a otros elementos.

Ahora, podemos utilizar estas variables en nuestras declaraciones de clases:

De esta manera, si deseo cambiar el color de fondo de todos los elementos con la clase title a verde, solo necesito cambiar el valor de la variable $submit-button-bg. Si quiero modificar la tonalidad del verde, simplemente cambio la variable. Esto nos facilita hacer modificaciones de manera rápida y centralizada.

Además de los colores, las variables pueden ser utilizadas para definir tamaños, anchos y realizar operaciones matemáticas en SASS. Este tema será tratado más adelante.

Extend: Reutilización de Código con Herencia

A medida que escribimos hojas de estilo, a menudo nos encontramos con código repetitivo, especialmente cuando varias clases comparten atributos comunes. Al igual que en la Programación Orientada a Objetos (P.O.O.), en SASS podemos reutilizar código mediante el uso de la herencia, lo que reduce la duplicación.

Veamos un ejemplo:

Y las clases que extienden esta clase:

En este caso, la clase hijo1 hereda todos los atributos de la clase padre. Sin embargo, la clase hijo2 añade un atributo adicional (font-weight: bold). El código CSS resultante sería el siguiente:

Como podemos ver, se reduce considerablemente la cantidad de código que tendríamos que escribir de manera tradicional.

Diferencia entre usar .padre y %padre (Placeholder)

Cuando usamos la clase .padre, los atributos de la clase se comparten entre todas las clases que la extienden. Sin embargo, si usamos %padre, estamos reutilizando el código pero sin incluir la clase padre en el CSS final.

El código CSS resultante no incluirá la clase .padre:

Mixin: Reutilización con Argumentos

Si tenemos elementos con estructuras similares pero con algunas variaciones (como botones con diferentes colores y tamaños), podemos usar mixins. Los mixins permiten pasar argumentos, lo que nos ofrece una mayor flexibilidad que el uso de %extend.

Por ejemplo, para definir un botón con diferentes colores y tamaños, podemos crear un mixin:

Luego, podemos usar este mixin para crear botones con diferentes estilos:

SASS es una herramienta poderosa y útil, fundamental para cualquier proyecto en el que se busque eficiencia, reutilización de código y una mejor organización de los estilos. A través de variables, la herencia con @extend y los mixins, podemos optimizar nuestro código y reducir la cantidad de trabajo repetitivo. Esto, a su vez, nos permite hacer modificaciones de forma rápida y sencilla.

En el futuro, seguiré explorando más funciones avanzadas de SASS para maximizar su potencial en nuestros proyectos.

Te recomendamos este video