Sass: 8 razones por las que es mejor que el CSS plano

SASS

Si me pidieran elegir cuál es mi tecnología o lenguaje favorito para trabajar, a buen seguro colocaría a Sass como uno de los principales candidatos. Productivo, simple y potente, no falta en ninguno de los proyectos importantes que desarrollo.

Sass (Syntactically Awesome Style Sheets) surge como la necesaria evolución sintáctica y funcional del CSS plano. A pesar de ser utilizado de manera continua desde hace años en cualquier proyecto web, CSS es un lenguaje anacrónico, difícil de mantener ordenado y engorroso de utilizar conforme va creciendo el tamaño de las hojas de estilos y el número de desarrolladores que meten mano en ellas.

Utilizo Sass desde que pasé por anfix, más concretamente Compass, un framework open-source basado en Sass para generar el CSS de mis proyectos. Porque, a diferencia de CSS, Sass no puede ser interpretado directamente por los navegadores, por lo que necesitamos generar código CSS clásico.

Muchos os preguntaréis: ¿por qué utilizar Sass si de todas formas acaba convirtiéndose en CSS? La respuesta es muy sencilla: porque optimiza el desarrollo, te permite trabajar más rápido y sobre todo de forma más ordenada.

A continuación comento aquellas funcionalidades propias de Sass que, en mi opinión, hacen que merezca la pena su uso:

Variables

Una de las carencias más importantes que tiene CSS es la imposibilidad de declarar de forma nativa variables. Sass sí que permite declarar variables, que yo en concreto utilizo para almacenar y parametrizar aspectos generales de la web como la paleta de colores, las fuentes y anchuras/alturas/tamaños de referencia para el diseño.

Ejemplo de uso de variables para establecer la paleta de colores:

Anidación de selectores

Sass permite jerarquizar y organizar mucho mejor los estilos de tu sitio web a través de la anidación de selectores. Este sistema es más intuitivo y permite ahorrar mucho código. Sin duda es lo que más echo de menos cuando tengo que trabajar con CSS plano. Un ejemplo:

Si lo comparamos con su alternativa en CSS plano, veremos que además de ser más legible en su versión Sass, utilizamos muchos menos caracteres para codificarlo (313 con Sass, 438 con su equivalente CSS).

Referencia al selector padre

Con Sass podemos utilizar el carácter & para referenciar al selector padre, especialmente útil cuando usamos pseudo clases (:hover, :first-of-type, :nth-child…) y pseudo elementos (:after, :before…). Los beneficios son los mismos que en el caso anterior, nos ayuda a tener un código más legible y es más productivo. Ejemplo:

Su equivalente en código CSS sería:

Mixins

Los mixins son funciones preconstruidas o construidas por nosotros que nos permiten reutilizar código. Son especialmente útiles cuando tenemos que utilizar propiedades CSS3 que tienen prefijos para permitir la compatibilidad con navegadores. Nuevamente nos permiten tener un código mucho más limpio y ordenado, y en este caso el ahorro de código es más evidente aún. Ejemplo utilizando dos mixins proporcionados por defecto por Compass (lista completa):

Código que una vez transformado en CSS produce la siguiente salida:

Operadores

Otra de las características de Sass que merecen mención especial es el uso de los operadores matemáticos +, -, *, / y %. Es muy útil cuando queremos calcular anchuras y alturas de elementos basados en variables o parámetros. A continuación un ejemplo de uso de operadores dentro de un mixin de creación propia:

Cada vez utilicemos este mixin se calcularán automáticamente las dimensiones en función del valor de los parámetros introducidos.

Herencia

El uso de la herencia para extender clases nos proporciona mucha potencia a la hora de utilizar estilos específicos basados en estilos genéricos. Un caso típico del uso de la herencia es el siguiente:

Modularización de las hojas de estilos

Otra funcionalidad muy útil que nos proporciona Sass es la posibilidad de modularizar los estilos en varios ficheros conectados, aún siendo la salida final un único archivo CSS. Esto ayuda a tener perfectamente localizados los estilos correspondientes a cada sección concreta de la web, algo de vital importancia en proyectos grandes con decenas de miles de líneas en las hojas de estilos. La única condición es que las hojas secundarias tengan su nombre precedido por un guión bajo (_) y estén importadas en la hoja principal.

El cómo hacer la división es algo totalmente arbitrario. En mi caso siempre tengo una hoja principal (all.scss) con los estilos más genéricos, y hojas secundarias para las variables (_variables.scss), mis mixins (_mixins.scss), cabecera (_header.scss), footer (_footer.scss), index (_index.scss) etc. Ejemplo:

Es muy importante establecer el orden de importación correcto. En mi caso las variables son utilizadas por todos los demás ficheros, por lo que han de ir en primer lugar. Lo mismo ocurre que con los mixins, razón por la cual la importo antes de empezar a generar estilos. A continuación incluyo los estilos más generales de la web (tipografía, tamaños de fuentes, propiedades genéricas…) y por último importo los estilos específicos de cada sección.

Es importante tener en cuenta que cuando hacemos la importación especificamos el nombre de la hoja de estilos sin guión bajo ni extensión (ejemplo “variables”), pero es necesario que exista un fichero físico con ese nombre precedido de guión bajo y con extensión .scss (ejemplo “_variables.scss”).

Minimización automática de CSS

Compass nos permite establecer cómo queremos que sea procesado nuestro código Sass para generar el CSS, permitiéndonos configurar que el código resultante sea automáticamente minimizado estableciendo en el config.rb la propiedad output_style = :compressed. La ventaja fundamental es que se eliminarán todos los comentarios y espacios innecesarios para producir el CSS más ligero posible en un único fichero, tarea prácticamente imposible de hacer de forma manual.

Conclusión: utilizar Sass es productivo

Comentaba al principio del artículo que con Sass se podía aumentar la productividad de tu trabajo generando hojas de estilos. Como prueba, un ejemplo real de uno de mis sitios web (futsalia.es): número de caracteres de mis hojas de estilos Sass 25.476, mientras que el código CSS generado (y minimizado) ocupa 62.901 caracteres. En este caso concreto, la diferencia es del 146%, que traducido a tiempo supone un más que notable ahorro, al margen de todas las demás ventajas que aporta a la hora de tener un código más organizado, legible y claro.

Uso de cookies

Este sitio web, como todos, utiliza cookies. Si continúas navegando por la web estás dando tu consentimiento para la aceptación de la política de cookies de este sitio web. ACEPTAR

Aviso de cookies