Hubo un tiempo en que aguérridos trabajadores del webmundo habían de enfrentarse a hojas de estilo CSS de miles y miles de líneas de código, ahogados por la desesperanza y temerosos de sustanciales cambios de diseño, pero, entonces, la luz de los preprocesadores acudió presta a dotar de claridad, orden y concisión a tamaña bestia. Bien podríamos comenzar así la historia de Sass (Syntactically Awesome Style Sheets), un preprocesador diseñado por Hampton Catlin y desarrollado por Nathan Weizenbaum que, como indican sus iniciales y representa su logotipo de neón rosado, consigue convertir la codificación de hojas de estilo en una actividad divertida y estimulante.
¿Qué nos aporta como para invertir tiempo y dedicación en él y añadirlo a nuestros proyectos? Ante todo, un enorme ahorro de código si se usa con acierto, así como un documento limpio y ordenado en el que el mantenimiento no se convierte en un infierno. ¿Y con respecto a otros preprocesadores? Pues una sintaxis muy intuitiva y fácil de aprender y entender.
Para empezar a trabajar, únicamente necesitaremos Node y un par de comandos. Lo instalaremos con npm install –g sass y, a continuación, lo usaremos con el comando sass –watch input.scss output.css –style compressed/nested/expanded/compact, en el cual, básicamente, estamos indicando con –watch que queremos que Sass vigile para compilar cuando exista algún cambio en el scss (esta es la extensión de los ficheros Sass). A continuación, indicamos el fichero scss a compilar y el nombre o fichero que queremos que reciba el css compilado. Por último, con el flag –style elegimos la manera en que se compilará el css, siendo compressed la opción para el css minificado.
A continuación, nombraremos algunas de las características que hacen de Sass un compañero de trabajo imprescindible.
Las variables
¿El cliente decide que quiere dar un cambio de look a su negocio y te encuentras con que tienes miles de referencias de color que ya no te sirven y que necesitas cambiar una a una? ¡Nunca más! Guarda el valor en una variable y utiliza el nombre de esta allá donde quieras usar dicho valor. Cuando necesites modificar el mismo, ¡sólo será necesario modificar esa línea y Sass se ocupará del resto! Para crear una variable, solo hemos de darle un nombre precedido del símbolo de dólar.
$corporativeColor: #cc0033;
La anidación
Para limitar propiedades de estilo a un elemento en concreto, era necesario recurrir al nombramiento de todos sus antepasados uno a uno de modo que, como en las grandes familias, uno acababa perdiéndose un poco en tamaña genealogía. Sass te permite cerrar entre llaves no solo las propiedades de un elemento, sino a sus hijos, y a los hijos y propiedades de estos, etc., creando auténticos árboles de elementos en los que apreciar con claridad sus relaciones, haciendo más sencillo su mantenimiento.
Elemento_padre { Propiedades… Elemento_hijo { Propiedades… } }
Matemáticas en tu hoja de estilo
Sass soporta múltiples tipos de datos y operaciones matemáticas y lógicas entre ellos, por lo que se convierte en un gran aliado en el cálculo de dimensiones de elementos relacionados, ahorrándonos tiempo y gasto neuronal. Es importante aquí destacar la interpolación (#{expresión}), que nos permitirá crear nombres de elementos a partir de variables, como, por ejemplo, .box-#{$i}, siendo $i una variable numérica.
width: #{(5 + 11) * 2} + ‘%’;
Elementos propios de la programación
Sin duda, uno de los platos fuertes de Sass es que te permite usar técnicas propias de la programación para preconfigurar tu CSS, pudiendo usar bucles con la directiva @for o @while y condicionales con @if/@else if /@else. También tenemos la posibilidad de crear nuestras propias funciones con la directiva @function y unas ‘funciones’ especiales que nos evitan la repetición de código llamadas @mixin, las cuales han dado una gran popularidad al lenguaje debido a su gran poder de reutilización, creando los usuarios sus propios mixin y subiéndolos para el uso y disfrute de cualquier otro usuario. Los mixin no devuelven ningún valor como las @function, sólo añaden código personalizado allá donde las usemos, añadiéndolas con un @include nombre_mixin(props).
Todas estas características son sólo un pequeño aperitivo de otras muchas herramientas que Sass pone a nuestra disposición. Como punto flojo, podríamos indicar que, al inicio, lleva tiempo ir encontrando cómo mejorar nuestro código con su sintaxis, debido a las muchas posibilidades que nos ofrece, pero, a la larga, supone un enorme ahorro de trabajo, ya que incluso nosotros mismos podemos reutilizar funciones o mixin entre proyectos, soluciones ante problemas similares, etc.
Si estás interesado en saber más, en su página oficial encontrarás un apartado de documentación muy fácil de usar y bastante completo, que incluye tanto ejemplos de uso como las estructuras CSS que crean los elementos SCSS al compilar.
