SASS: ¿CSS en el siguiente nivel?

Con CSS puedes diseñar páginas web de acuerdo a tus ideas y tus gustos. Sin embargo, el lenguaje de hojas de estilo en cascada tiene sus límites. Muchos desarrolladores web quieren una forma más cómoda y dinámica de diseñar páginas: aquí es donde entran en juego los preprocesadores para CSS. Con este lenguaje de hojas de estilo, que puede considerarse prácticamente una extensión del CSS subyacente, puedes simplificar enormemente el trabajo de diseño. El más conocido de estos lenguajes extendidos es SASS. ¿Qué hay detrás de las siglas SASS (Syntactically Awesome Stylesheets)?

Para entender qué es SASS y por qué puedes necesitar este lenguaje, debes entender el significado de CSS. Las páginas web se basan inicialmente en el lenguaje de marcado HTML. Pero si deseas diseñar en HTML, en cada página HTML tienes que vincular el contenido al diseño. En pocas palabras: el HTML no está pensado para dar formato de diseño y, por lo tanto, está muy limitado en este sentido. La hoja de estilo en cascada (CSS, del inglés Cascading Style Sheet) define el aspecto visual de las páginas HTML. Al igual que una plantilla, el CSS define el diseño de cada elemento de la página en el código HTML: fuente, color del texto y fondo. Los diseñadores web utilizan CSS para definir todos estos elementos de diseño.

Por ejemplo, para establecer que todos los encabezados tengan el formato de fuente Calibri de 22 píxeles, debes definirlo en la hoja de estilos, que proporciona directrices sobre el aspecto de tu página web. Estas reglas se encuentran normalmente en un archivo separado al que enlazan las páginas HTML, lo que reduce en gran medida la carga de información por página.

A pesar de su gran utilidad, CSS tiene ciertos límites, que se hacen especialmente evidentes cuando se ha trabajado con este lenguaje durante años. Su principal ventaja es también uno de sus inconvenientes: el lenguaje es muy simple. SASS lo hace un poco más sofisticado y facilita enormemente el trabajo de creación del diseño.

Todos los navegadores modernos pueden mostrar fácilmente CSS, pero esto no se aplica a SASS (a pesar de usarse desde hace más de diez años) u otros lenguajes avanzados de hojas de estilo. Por lo tanto, SASS generalmente se considera como un preprocesador. El código en el documento SASS se convierte primero a CSS antes de que el sistema entregue el código fuente y por lo tanto la página web.

En un primer momento, puede parecer que SASS no es necesario para diseñar una buena página web. Al fin y al cabo, con CSS ya se pueden definir los puntos básicos para poner una web en marcha. Además, aunque quieras trabajar con SASS de ahora en adelante, no puedes olvidarte de CSS. El conocido lenguaje de hojas de estilo seguirá siendo la base de la presentación de las páginas web en el futuro: SASS y otros lenguajes de estilo necesitan a CSS.

Con SASS, sin embargo, tienes algunas opciones que CSS por sí solo no te puede ofrecer:

• Variables: con SASS, la información puede almacenarse en variables para su posterior reutilización. Por ejemplo, es posible almacenar un valor de color de forma centralizada bajo una variable más práctica.
• Funciones matemáticas: también puedes utilizar operadores matemáticas como +, -, *, / o %. Esto te permite influir en las especificaciones de tamaño, por ejemplo.
• Funciones: otras funciones también facilitan el trabajo en el diseño. Se pueden utilizar, por ejemplo, para ajustar valores de color o analizar listas.
• Bucles: otra ventaja de SASS es que puedes utilizar bucles que se repiten hasta que se alcanza un estatus definido.
• Distinción de casos: las sentencias condicionales “si” (if) y “de lo contrario” (else) funcionan de manera similar. Los comandos especificados solo se ejecutan si se producen ciertos estados.
• Mixins: las llamadas “mixins” son plantillas. Puedes crearlas tú mismo o simplemente integrarlas en tu propio código cuando utilices un marco de trabajo.
• Huecos: el SASS original (a diferencia del SCSS) utiliza sangrías y saltos de línea para estructurar el código. No necesita paréntesis para mostrar los anidamientos, ni punto y coma para marcar los extremos de las líneas.
• Anidación de selectores: CSS no permite anidar el código. Con SASS, sin embargo, el usuario puede visualizar las dependencias, disminuyendo la redundancia y el esfuerzo de escritura de código.
• Sucesiones: es posible traspasar propiedades de un selector a otro. Esto también ahorra escritura innecesaria y reduce las líneas de código.
• Archivos en partes: para integrar elementos de código en un archivo SASS.

Existen algunos marcos y bibliotecas útiles para SASS que sirven para no empezar de cero. Compass o Bourbon te ayudarán en gran medida con el trabajo de diseño de una página web.

Para que el código SASS que se ha escrito tenga el efecto deseado, debes convertirlo a CSS. La compilación es muy fácil y se realiza con una línea de comandos:

Este comando compila el código fuente del archivo ejemplo.sass que has creado anteriormente en un nuevo archivo CSS. La estructura y la sintaxis de SASS se adaptan automáticamente a las reglas de CSS sin que tengas que realizar ninguna acción manual.

Al igual que van cambiando los gustos de los usuarios y las modas, también tendrás que modificar y modernizar el diseño de tu página web, así como introducir cambios en el código de forma regular. SASS te ofrece la posibilidad de monitorizar carpetas o archivos con el parámetro --watch, facilitando cualquier tipo de modificación, ya que, si haces cambios en estos, el sistema recompilará de forma automática.

SASS se puede usar con dos formas de sintaxis diferentes: la forma original, a menudo llamada "indented syntax" (sintaxis de indentación), y una variante más nueva, que está más orientada a los requisitos de CSS y se denomina Sassy CSS (SCSS); es decir, CSS estilo SASS. Con la versión 3 de SASS, SCSS se ha establecido como sintaxis oficial. La mayor diferencia entre ambas: el uso de paréntesis y del punto y coma.

La sintaxis original de SASS trabaja con sangrías y saltos de línea, un enfoque de estilo YAML. Para completar una línea de código, basta con hacer un salto de línea, es decir, pulsar la tecla Intro. La indentación funciona fácilmente con el tabulador. Al cambiar la posición en la tipografía, se forman agrupaciones, los llamados bloques de declaración, lo que no es posible en CSS. En este caso, deben utilizarse llaves para las agrupaciones y punto y coma para las declaraciones de propiedad. Y eso es exactamente lo que SCSS necesita.

Algunos usuarios prefieren el fácil manejo del SASS original, en el que no es necesario prestar atención a la correcta configuración de los separadores cuando se mueven fragmentos de código fuente y, en general, generar un código más limpio y claro. En general, la "sintaxis sangrada" se conforma con menos caracteres y líneas. Los seguidores de SCSS, por otro lado, prefieren aceptar este esfuerzo adicional, ya que se asemeja más a la sintaxis que ya conocen de CSS.

SCSS es un superconjunto de CSS, lo que asegura que el código CSS también funciona en SCSS, pero no al revés. Las funciones de SASS siguen estando plenamente incluidas, razón por la cual se hace más fácil trabajar con ambos idiomas al mismo tiempo. Además, para las personas que ya trabajan con CSS y se han acostumbrado a la sintaxis, el cambio es mucho más sencillo. Aunque SASS soporta ambas sintaxis, tú tienes que decidir cuál escoger para cada proyecto: para distinguir entre los diferentes formatos, se les da a los archivos la extensión .sass o .scss.

SASS tiene algunas ventajas, pero no todo el mundo está a favor de utilizar este preprocesador. Las ventajas son obvias: el lenguaje ofrece al usuario más posibilidades a la hora de crear código. Por ejemplo, muchos diseñadores web valoran la función de almacenar colores en variables en lugar de tener que especificar siempre el valor de color en un número hexadecimal. Los mixins, las variables y los anidamientos hacen que sea mucho más fácil. Esta teoría aboga por evitar las repeticiones en el código y así mantener el código fuente más ligero. Además, esto reduce enormemente el tiempo y el esfuerzo necesarios para los cambios.

Las desventajas de SASS básicamente existen en todos los preprocesadores y se refieren al hecho de que el código creado debe ser compilado primero, lo que añade otro paso al proceso de desarrollo y hace que sea un poco más largo. En lugar de hacer ajustes directamente en el archivo CSS y ver los efectos directamente en la página web, los cambios en el diseño deben traducirse primero en el código. Este proceso puede ser propenso a errores.

Por otra parte, antes de usar SASS (como con cualquier tecnología que desconozcas) debes adquirir los conocimientos necesarios para trabajar con soltura con este preprocesador. Además de CSS, tendrás que dominar otro lenguaje de programación y conocer todos sus entresijos.

LESS, junto a SASS, se ha establecido también en los círculos de desarrollo como el lenguaje más utilizado para el diseño de páginas web. Este lenguaje de hojas de estilo está más orientado a CSS y por lo tanto es más similar a la sintaxis de SCSS. Los dos preprocesadores comparten algunas características: LESS y SASS contienen el uso de mixins y variables. Una de sus principales diferencias es que SASS está basado en Ruby, mientras que LESS utiliza JavaScript. Sin embargo, esta particularidad no proporciona a ninguno de los dos ventajas sobre el otro.

Las diferencias reales se pueden encontrar en sus funciones lógicas: LESS ofrece a los usuarios la posibilidad de activar mixins solo cuando surgen situaciones específicas. Esta es una característica útil, y muy utilizada por aquellos que usan LESS. SASS, por otro lado, ofrece loops y distinciones de cajas que también se utilizan al escribir en algunos lenguajes de programación.

Con SASS, los usuarios son libres de elegir si prefieren la "sintaxis de indentación" o SCSS. Así que cada desarrollador puede decidir por sí mismo si quiere alejarse de las reglas de CSS o permanecer más cerca del original.

SASS es mucho más popular entre los diseñadores web. Sin embargo, esto también puede deberse al hecho de que SASS se desarrolló con anterioridad a LESS. Inicialmente, LESS contaba con el apoyo del popular marco de trabajo de frontend Bootstrap, que dependía del preprocesador más joven. Con la versión 4, el proyecto ha cambiado oficialmente a SASS, lo que probablemente aumentará todavía más la popularidad de este lenguaje de hojas de estilo.