SASS: ¿qué es y cómo utilizarlo?

Si estás siguiendo un camino como programador front-end, seguro que ya has oído hablar de cosas como el lenguaje HTML, el lenguaje CSS y el lenguaje JavaScript. Estos, sin embargo, son solo la base para convertirse en un desarrollador web exitoso. Para poder afrontar el desarrollo web con un equipo extra y de forma más eficiente, muchos prueban suerte en SASS.

¿Qué es SASS?

Sabemos lo que es CSS. Partiendo de esta suposición, podemos considerar a SASS como una especie de variante más avanzada del lenguaje CSS, muy útil en proyectos complejos y de gran envergadura, cuyo fin es simplificar mucho la fase de desarrollo, así como agilizarla.

¿Por qué usar SASS?

Si las razones anteriores no son suficientes, te informaremos de inmediato: hay varias razones para aprender a usar SASS:

• Dado que SASS es una variante de CSS, muchas de las instrucciones son idénticas y, por lo tanto, es más fácil de aprender.
• SASS utiliza elementos reutilizables, lo que ahorra tiempo y reduce la posibilidad de error.
• SASS es muy estable y siempre respaldado por su comunidad que lo usa constantemente.

Pero, ¿por qué preferirlo antes que CSS?

¿Qué ofrece SASS y qué agrega a CSS?

Comencemos con un caso de uso específico: si quisiéramos crear una función que calcule la longitud de una contraseña, no podríamos hacerlo con CSS. Esto se debe a que CSS no está diseñado para cálculos o toma de decisiones. Ahora supongamos que queremos cambiar el color del texto a verde si la contraseña tiene más de 6 caracteres. Con SASS podemos conseguir todo esto, ya que integra funcionalidades de un lenguaje de programación real, como Php o Javascript. Podemos, por tanto, crear una función que gestione las contraseñas para utilizarla allí donde se necesite.

Para evaluar bien las diferencias concretas entre SASS y CSS clásico, examinemos un trozo de código:

SASS CSS

Si bien los dos fragmentos de código son muy similares, existen algunas diferencias importantes que, en un fragmento de código más largo y complejo, pueden marcar la diferencia en la forma en que otros miembros de su equipo entienden el código. Podemos ver que en el SASS hay una sangría, lo que hace que el código esté más organizado y ordenado. De esta forma, podemos comprender rápidamente que el bloque de sección tiene varias clases con diferentes atributos. En CSS, sin embargo, no existe tal división, por lo que la vista general está más desordenada y no queda claro de inmediato que todas las clases se refieren al bloque de sección.

Entonces, ¿cuáles son las ventajas y desventajas de SASS?

Con este cuadro resumen esperamos haberte despejado la mente.
Seguramente, cualquiera que aspire a una carrera como desarrollador web front-end es la persona adecuada para estudiar SASS. ¿Eres uno de ellos?