5 razones por las que amo SASS
Para quienes no lo sepan, SASS es un preprocesador de CSS, es decir, una herramienta que ofrece más funcionalidades para trabajar los estilos pero que al final se compilan en CSS puro. ¿Las ventajas? Muchísimas, de hecho aún no conozco a profundidad todas las herramientas, pero hasta el momento, esto es lo que me ha hecho la vida más fácil:
Variables
Esto fue lo que más me emocionó de todo cuando conocí SASS. Antes cuando quería usar colores para un sitio web a veces repetía los valores en muchos lados y no tenía control sobre cuál color era cual. Al poco tiempo me encontraba con muchos colores dispersos en mi css sin identificar.
Puedes definir variables para atributos que puedes repetir una y otra vez con sólo mandarlos llamar. Lo genial de esto a futuro es que si quisieras cambiar toda una paleta de colores, sòlo necesitas reemplazar las variables.
Mixins
Esta herramienta hace que escribir CSS sea más cómodo y rápido. Si han declarado algún atributo de CSS3 se habrán dado cuenta que lo ideal es incluir los prefijos para diversos navegadores (-moz, -webkkit, -ms, etc) para que lo puedan reconocer. Ahora imaginen que necesitan declarar un box-shadow una y otra vez a lo largo de su css…
En vez de repetir las mismas líneas, puedes crear un mixin en el que pongan todo ese código que van a reusar y puedes incluir algunas variables para que puedas personalizarlo en diferentes casos.
La organización de un proyecto
Podrían tener una sola hoja de CSS y hacer una revoltura de estilos para botones, columnas, bloques, típografías, etc. Al principio sería fácil identificar los elementos conforme a orden de aparición… en el mejor de los casos. Pero conforme el sitio crece y se vuelve más complejo simplemente la hoja va a perder la forma y no tendrían idea si un estilo ya lo declararon o no y se verán obligados a repetirlo.
Con SASS puedes hacer varios archivos y organizarlos para tener control de todo el css que se escriba, sobre todo para la ubicación de las clases y evitar duplicados.
Pueden leer el artículo de The SASS Way que explica más a profundidad la organización ideal de un proyecto.
Las funciones
Las funciones de SASS incluyen la manipulación de los colores, operaciones matemáticas, mapeo, strings y demás. De lo que más he sacado provecho han sido las funciones de color para mantener mi paleta de colores organizada.
Es realmente fácil ajustar los valores de tus colores base para tener variantes que le den versatilidad a tu página.
Nesting
Anidar estilos puede ser muy conveniente para que tus clases sean más específicas. A mi me gusta utilizarlo para los selectores de links y cuando quiero dejar muy claro que cierto estilo sólo se va a utilizar si está dentro de uno más general.
A pesar de que es muy práctica esta herramienta, debe usarse con cuidado y no abusar. ¡Con un gran poder, viene una gran responsabilidad!
—
Si quieren llevar su calidad de CSS a otro nivel, realmente les recomiendo usar SASS. No se van a arrepentir ;).
Para comenzar a utilizar este preprocesador, les recomiendo leer la guía básica de uso.