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 de­sa­rro­lla­do­res web quieren una forma más cómoda y dinámica de diseñar páginas: aquí es donde entran en juego los pre­pro­ce­sa­do­res para CSS. Con este lenguaje de hojas de estilo, que puede co­n­si­de­rar­se prá­c­ti­ca­me­n­te una extensión del CSS su­b­ya­ce­n­te, puedes si­m­pli­fi­car eno­r­me­me­n­te el trabajo de diseño. El más conocido de estos lenguajes ex­te­n­di­dos es SASS. ¿Qué hay detrás de las siglas SASS (Sy­n­ta­c­ti­ca­lly Awesome St­y­le­sheets)?

Para entender qué es SASS y por qué puedes necesitar este lenguaje, debes entender el si­g­ni­fi­ca­do de CSS. Las páginas web se basan ini­cia­l­me­n­te 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 di­se­ña­do­res web utilizan CSS para definir todos estos elementos de diseño.

Por ejemplo, para es­ta­ble­cer que todos los en­ca­be­za­dos tengan el formato de fuente Calibri de 22 píxeles, debes definirlo en la hoja de estilos, que pro­po­r­cio­na di­re­c­tri­ces sobre el aspecto de tu página web. Estas reglas se en­cue­n­tran no­r­ma­l­me­n­te en un archivo separado al que enlazan las páginas HTML, lo que reduce en gran medida la carga de in­fo­r­ma­ción por página.

A pesar de su gran utilidad, CSS tiene ciertos límites, que se hacen es­pe­cia­l­me­n­te evidentes cuando se ha trabajado con este lenguaje durante años. Su principal ventaja es también uno de sus in­co­n­ve­nie­n­tes: el lenguaje es muy simple. SASS lo hace un poco más so­fi­s­ti­ca­do y facilita eno­r­me­me­n­te el trabajo de creación del diseño.

Todos los na­ve­ga­do­res modernos pueden mostrar fá­ci­l­me­n­te 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 ge­ne­ra­l­me­n­te se considera como un pre­pro­ce­sa­dor. 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 pre­se­n­ta­ció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 in­fo­r­ma­ción puede al­ma­ce­nar­se en variables para su posterior re­uti­li­za­ción. Por ejemplo, es posible almacenar un valor de color de forma ce­n­tra­li­za­da bajo una variable más práctica.
• Funciones ma­te­má­ti­cas: también puedes utilizar ope­ra­do­res ma­te­má­ti­cas como +, -, *, / o %. Esto te permite influir en las es­pe­ci­fi­ca­cio­nes 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.
• Di­s­ti­n­ción de casos: las se­n­te­n­cias co­n­di­cio­na­les “si” (if) y “de lo contrario” (else) funcionan de manera similar. Los comandos es­pe­ci­fi­ca­dos solo se ejecutan si se producen ciertos estados.
• Mixins: las llamadas “mixins” son pla­n­ti­llas. Puedes crearlas tú mismo o si­m­ple­me­n­te in­te­grar­las en tu propio código cuando utilices un marco de trabajo.
• Huecos: el SASS original (a di­fe­re­n­cia del SCSS) utiliza sangrías y saltos de línea para es­tru­c­tu­rar el código. No necesita pa­ré­n­te­sis para mostrar los ani­da­mie­n­tos, ni punto y coma para marcar los extremos de las líneas.
• Anidación de se­le­c­to­res: CSS no permite anidar el código. Con SASS, sin embargo, el usuario puede vi­sua­li­zar las de­pe­n­de­n­cias, di­s­mi­nu­ye­n­do la re­du­n­da­n­cia y el esfuerzo de escritura de código.
• Su­ce­sio­nes: es posible traspasar pro­pie­da­des de un selector a otro. Esto también ahorra escritura in­ne­ce­sa­ria 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 bi­blio­te­cas ú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 co­n­ve­r­ti­r­lo a CSS. La co­m­pi­la­ció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 an­te­rio­r­me­n­te en un nuevo archivo CSS. La es­tru­c­tu­ra y la sintaxis de SASS se adaptan au­to­má­ti­ca­me­n­te 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 mo­de­r­ni­zar el diseño de tu página web, así como in­tro­du­cir cambios en el código de forma regular. SASS te ofrece la po­si­bi­li­dad de mo­ni­to­ri­zar carpetas o archivos con el parámetro --watch, fa­ci­li­ta­n­do cualquier tipo de mo­di­fi­ca­ción, ya que, si haces cambios en estos, el sistema re­co­m­pi­la­rá de forma au­to­má­ti­ca.

SASS se puede usar con dos formas de sintaxis di­fe­re­n­tes: la forma original, a menudo llamada "indented syntax" (sintaxis de in­de­n­ta­ción), y una variante más nueva, que está más orientada a los re­qui­si­tos de CSS y se denomina Sassy CSS (SCSS); es decir, CSS estilo SASS. Con la versión 3 de SASS, SCSS se ha es­ta­ble­ci­do como sintaxis oficial. La mayor di­fe­re­n­cia entre ambas: el uso de pa­ré­n­te­sis 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 in­de­n­ta­ción funciona fá­ci­l­me­n­te con el tabulador. Al cambiar la posición en la ti­po­gra­fía, se forman agru­pa­cio­nes, los llamados bloques de de­cla­ra­ción, lo que no es posible en CSS. En este caso, deben uti­li­zar­se llaves para las agru­pa­cio­nes y punto y coma para las de­cla­ra­cio­nes de propiedad. Y eso es exac­ta­me­n­te 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 co­n­fi­gu­ra­ción de los se­pa­ra­do­res cuando se mueven fra­g­me­n­tos 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 ca­ra­c­te­res y líneas. Los se­gui­do­res 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 su­pe­r­co­n­ju­n­to 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 ple­na­me­n­te 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 aco­s­tu­m­bra­do 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 di­s­ti­n­guir entre los di­fe­re­n­tes 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 pre­pro­ce­sa­dor. Las ventajas son obvias: el lenguaje ofrece al usuario más po­si­bi­li­da­des a la hora de crear código. Por ejemplo, muchos di­se­ña­do­res web valoran la función de almacenar colores en variables en lugar de tener que es­pe­ci­fi­car siempre el valor de color en un número he­xa­de­ci­mal. Los mixins, las variables y los ani­da­mie­n­tos hacen que sea mucho más fácil. Esta teoría aboga por evitar las re­pe­ti­cio­nes en el código y así mantener el código fuente más ligero. Además, esto reduce eno­r­me­me­n­te el tiempo y el esfuerzo ne­ce­sa­rios para los cambios.

Las de­s­ve­n­ta­jas de SASS bá­si­ca­me­n­te existen en todos los pre­pro­ce­sa­do­res y se refieren al hecho de que el código creado debe ser compilado primero, lo que añade otro paso al proceso de de­sa­rro­llo y hace que sea un poco más largo. En lugar de hacer ajustes di­re­c­ta­me­n­te en el archivo CSS y ver los efectos di­re­c­ta­me­n­te en la página web, los cambios en el diseño deben tra­du­ci­r­se primero en el código. Este proceso puede ser propenso a errores.

Por otra parte, antes de usar SASS (como con cualquier te­c­no­lo­gía que de­s­co­no­z­cas) debes adquirir los co­no­ci­mie­n­tos ne­ce­sa­rios para trabajar con soltura con este pre­pro­ce­sa­dor. Además de CSS, tendrás que dominar otro lenguaje de pro­gra­ma­ción y conocer todos sus en­tre­si­jos.

LESS, junto a SASS, se ha es­ta­ble­ci­do también en los círculos de de­sa­rro­llo 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 pre­pro­ce­sa­do­res comparten algunas ca­ra­c­te­rí­s­ti­cas: LESS y SASS contienen el uso de mixins y variables. Una de sus pri­n­ci­pa­les di­fe­re­n­cias es que SASS está basado en Ruby, mientras que LESS utiliza Ja­va­S­cri­pt. Sin embargo, esta pa­r­ti­cu­la­ri­dad no pro­po­r­cio­na a ninguno de los dos ventajas sobre el otro.

Las di­fe­re­n­cias reales se pueden encontrar en sus funciones lógicas: LESS ofrece a los usuarios la po­si­bi­li­dad de activar mixins solo cuando surgen si­tua­cio­nes es­pe­cí­fi­cas. Esta es una ca­ra­c­te­rí­s­ti­ca útil, y muy utilizada por aquellos que usan LESS. SASS, por otro lado, ofrece loops y di­s­ti­n­cio­nes de cajas que también se utilizan al escribir en algunos lenguajes de pro­gra­ma­ción.

Con SASS, los usuarios son libres de elegir si prefieren la "sintaxis de in­de­n­ta­ción" o SCSS. Así que cada de­sa­rro­lla­dor puede decidir por sí mismo si quiere alejarse de las reglas de CSS o pe­r­ma­ne­cer más cerca del original.

SASS es mucho más popular entre los di­se­ña­do­res web. Sin embargo, esto también puede deberse al hecho de que SASS se de­sa­rro­lló con an­te­rio­ri­dad a LESS. Ini­cia­l­me­n­te, LESS contaba con el apoyo del popular marco de trabajo de frontend Bootstrap, que dependía del pre­pro­ce­sa­dor más joven. Con la versión 4, el proyecto ha cambiado ofi­cia­l­me­n­te a SASS, lo que pro­ba­ble­me­n­te aumentará todavía más la po­pu­la­ri­dad de este lenguaje de hojas de estilo.