Sass es una extensión de CSS que nos hace mucho más sencillo y sostenible trabajar en nuestras hojas de estilo. Se trata de un sistema muy popular, compatible con todas las versiones de CSS y fuertemente respaldado por la comunidad.
Sass es un preprocesador, que nos permite utilizar funciones que no existen en CSS para complementar nuestro código. El uso de anidados, mixins, herencias y otras funcionalidades simplifica el código y lo hace más legible y fácil de mantener. Una vez estemos listos para pasar la página a producción, podemos procesar nuestro archivo Sass y convertirlo en un archivo CSS, utilizándolo como lo haríamos habitualmente.
Para realizar este paso adicional podemos utilizar la consola de comandos. Es posible que al principio este flujo de trabajo te resulte intimidante, pero lo cierto es que bastará con un sencillo comando para que el sistema se encargue de todo.
¡Ei! ¡Esto es la primera parte de una serie de artículos!
No te pierdas el resto:
1. ¿Qué es Scss y Sass?
2. ¿Cómo utilizar Scss y Sass?
3. Funciones en Sass
¿Cuáles son las principales funcionalidades de Sass?
Como digo, la principal ventaja de Sass es que aporta un conjunto extra de herramientas, que nos facilitarán tanto la escritura como la lectura y mantenimiento del código. Entre ellas destacan:
- Variables.
- Anidación (nesting).
- Parciales (partials).
- Módulos (modules).
- Mixins.
- Herencia (extend/inheritance).
- Operadores.
Variables
Las variables, como en cualquier lenguaje de programación, nos permiten guardar información para reutilizarla en cualquier lugar de nuestra hoja de estilo. Por ejemplo, podemos almacenar colores, fuentes y otros valores.
Una vez procesemos el archivo, el .css resultante no contendrá el nombre de la variable, sino su valor. Pero esto nos permitirá hacer cambios globales con tan solo modificar el valor de nuestra variable en el archivo preprocesado y volviéndolo a procesar.
Las variables en Sass se declaran con el símbolo del dólar:
Anidación (nesting)
La anidación en Sass nos permite simplificar el uso de selectores, ofreciéndonos una forma más visual y jerarquizada de seleccionar elementos anidados. En lugar de utilizar la sintaxis propia de CSS:
Anidaremos nuestros elementos del siguiente modo:
Parciales (partials)
Los partials son archivos que contienen pequeños fragmentos de código para reutilizarse en otros ficheros. Para crearlos basta con iniciar el nombre del archivo con un guion bajo, y para utilizarlos emplearemos la regla @use, seguida de la ruta del archivo (sin el guion bajo ni la terminación .scss o .sass). El procesador detectará que el archivo es un partial al leer el guion bajo y no lo incluirá entre los resultados en CSS.
Módulos (modules)
La regla @use también nos sirve para importar módulos, que nos permiten referenciar a variables, mixins y funciones definidas en otros archivos.
Mixins
Los mixins son comparables a lo que sería una función en otro lenguaje de programación. Se trata de grupos de código que definimos con la regla @mixin, seguida del nombre que le queramos dar, y que posteriormente podemos utilizar con la regla @include, seguida del nombre que hayamos establecido. Incluso podemos pasarles argumentos como si se tratara de funciones para dotarlos de más flexibilidad.
Herencia (extend/inheritance)
Sass también nos permite agrupar declaraciones, dotándolas de un nombre que va precedido por el signo %. Posteriormente, podremos utilizarlas mediante la regla @extend, seguida del nombre de la declaración e incluyendo el símbolo del porcentaje. La particularidad de estas declaraciones es que no se procesarán si no las utilizamos, por lo que el código procesado estará libre de declaraciones no empleadas.
Pero las herencias no solo nos permiten obtener un código más limpio. También nos evitan la necesidad de dotar de varias clases a aquellos elementos que tienen unos elementos en común y otros divergentes, como los mensajes de éxito/error.
Operadores
Sass también nos permite importar y utilizar operadores matemáticos mediante la regla @use “sass:math”.
Otras ventajas de Sass
Sass también nos aporta otras prestaciones. Por ejemplo, podemos utilizar el selector & para hacer referencia al propio selector que estemos utilizando.
También podemos utilizar la regla @extend para importar todas las reglas que estemos utilizando sobre otro selector (muy útil si queremos configurar una herencia con ciertas excepciones).
Por último, disponemos de otras reglas importantes, como @function o módulos nativos que nos permiten trabajar fácilmente con colores, listas o mapas. Sobre estas cuestiones profundizaremos más adelante.
¿Cuál es la diferencia entre Sass y SCSS?
La principal diferencia entre Sass y Scss es la sintaxis. Mientra Scss utiliza una sintaxis más parecida al CSS tradicional, Sass no requiere la utilización de llaves para agrupar las declaraciones ni de puntos y comas para cerrar cada una de ellas. Eso sí, requiere tener cuidado con la importación.
De modo que sí, aunque en todo momento te he estado hablando de Sass, el código de ejemplo que he utilizado era Scss. Y es que creo que esta es la mejor forma de mostrar que no existe diferencia en cuanto al comportamiento de una u otra sintaxis. Lo único que deberás recordar es que el uso de una u otra sintaxis depende de la extensión del archivo que estés utilizando.
Por último, recomendarte que eches un vistazo a la guía oficial de Sass (de donde vienen los ejemplos que he utilizado, por cierto), y que estés pendiente a las siguientes actualizaciones sobre este potente preprocesador para CSS.
También te recomiendo que sigas leyendo el siguiente artículo de esta serie: cómo utilizar Sass y Scss.
BONUS: Alternativa a Sass
Tan solo avisarte que también tengo otro artículo que podría resultarte de interés si estás aprendiendo a utilizar Sass. En particular, este artículo sobre qué es Less, otro preprocesador de CSS ampliamente utilizado.