SASS es uno de los preprocesadores más utilizados dentro de los desarrollos web. Para comprender más el funcionamiento y uso de este, primero debemos saber cómo es que funcionan los preprocesadores.


¿Qué son los preprocesadores CSS?

Un preprocesador es una herramienta que nos permite escribir código de hojas de estilo usando variables, funciones, animación de selectores, etc. y pasarlo a un código CSS estándar legible para los exploradores.

Al usar los preprocesadores tendremos las siguientes ventajas durante el desarrollo de nuestro proyecto:

  • Ahorro de tiempo: escribiremos menos código al hacer uso de las propiedades del preprocesador.
  • Código organizado: podemos organizar e importar archivos para separar nuestro código por bloques/secciones/módulos.
  • Facilidad de mantenimiento: al ordenar los archivos por secciones/elementos, el mantenimiento del código será más fácil.
  • Reutilización de código: separar tu código en módulos independientes lo vuelve más reutilizable evitandote repetir muchas veces estilos.

Ya hablamos sobre las ventajas de su uso, ahora veremos las desventajas que lleva el uso de los preprocesadores:

  • Curva de aprendizaje: No es que sea complejo entender el uso y estructura para utilizarlos, pero sin duda al ser algo nuevo, tiene que aprender a utilizarse.
  • Malas prácticas: Al ser más flexible con la escritura de código se pueden tener malas prácticas dentro de tu código. Un ejemplo es la anidación de estilos.
  • Repetir código: el mal uso de mixins nos lleva a tener código repetido.

Ahora que ya sabes que es un procesador, vamos a ver cómo funciona SASS.

SASS tiene dos formatos diferentes para la sintaxis: .sass y .scss

  • El primero en salir fue .sass y se caracteriza por no usar llaves ni punto y coma.
  • Con la versión 3 salió .scss que permiten utilizar llaves e incorporar código de CSS clásico.

Ninguno de los 2 formatos puede ser interpretado directamente por un navegador, por lo que se debe compilar el archivo para obtener un .css final.

Las principales funcionalidades de SASS utilizando la sintaxis .scss son:

1. Variables: Nos permite declarar variables y asignarles un valor para reutilizarlo dentro de nuestro desarrollo. Se permite el uso de 4 tipos de datos los cuales son: números, strings, colores en hexadecimal o por nombre (en ingles) y valores de tipo booleano. Ejemplo:

2. Mixins: Es semejante a una función y puede ser llamado en distintos selectores para su uso. Esto nos permite escribir código reutilizable. Ejemplo:

3. Extend (herencia): Haciendo uso de la palabra @extend te permite compartir un conjunto de propiedades CSS de un selector a otro. Ejemplo:3.

4. Nesting (anidamiento): Esta característica  nos permite anidar selectores para obtener una jerarquía visual, pero el exceso de anudamientos hace que caigamos en malas prácticas al tener un código difícil de mantener.

5. Funciones: si solo necesitas hacer cálculos matemáticos puedes crear funciones ad hoc para llamarlas a la hora de compilar. Ejemplo:

6. Partials: un partial es un archivo que lleva un guión bajo al inicio de su nombre (Ejemplo: _functions.scss). Esto ayuda a ordenar en módulos nuestros archivos. Como ejemplo vamos a utilizar un archivo nombrado “_variables.scss” en el que haremos la declaración y asignación de las variables. Utilizando la palabra reservada @import en el archivo principal podremos hacer uso de las variables en todo el código importado.

Nota: Es importante destacar que el guión bajo le permite a Sass saber que el archivo es un partial y que será llamado con @import desde el archivo principal .scss

Lo más difícil de utilizar SASS es animarte a adentrarte en el tema, pero una vez que lo hayas dominado verás que escribir código de esta manera te ayudará a ser más eficiente durante el desarrollo y mantenimiento de tus proyectos.