Ventajas de usar Sass y no solo CSS

Sergio S.

16/03/2018

¿Primero que nada que es Sass?

Antes de mencionar las ventajas de usar Sass una breve introducción. Sass (Syntactically Awesome Stylesheets) es un metalenguaje de Hojas de Estilo en Cascada (CSS). Es un lenguaje de script (SassScript) que una vez que es compilado es traducido a CSS. También proporciona mecanismos como el uso de variables, partials, import, nesting (anidamiento), mixins, y herencia de los selectores.

Sintaxis permitidas en Sass

Sintaxis de sangrado (indented syntax) cuando usas archivos con extención .sass, que usa la identación para separar bloques de codigo y una nueva linea para separar las reglas que si vienes de usar lenguajes como Python encontraras cierta similitud.

Sintaxis por bloques por medio de llaves { código } cuando usas archivos con extencion .scss, que si vienes de usar lenguajes de programación como PHP o Java encontraras también cierta similitud con este tipo de sintaxis.

El código es guardado en ficheros que tienen las extensiones .sass y .scss dependiendo de la sintaxis que vayas a usar.

Ventajas de usar Sass y ya no solo CSS

El usar Sass apoya en la construcción de bloques de código de forma más modular, cosa que con CSS la verdad no era posible hacerlo. Pero que quiero decir de forma más modular, pues que te permite construir bloques de código y reutilizarlos e inclusive hacer herencia de estos bloques de código y heredarlos a otros selectores, cosa muy parecida a lo que ofrece un lenguaje de programación.

Iremos describiendo algunos de los mecanismos mas destacados que ofrece:

• Definición de variables. las variables comienzan con el signo de dolar $ y la asignación de variables se hace con el uso de dos puntos :

Estas variables permiten 4 tipos de datos los cuales son: números, String o cadenas de caracteres, colores en hexadecimal o por nombre (en ingles) y valores de tipo booleano.

• Partials. Un partial es un archivo Sass nombrado al principio con un subrayado inicial. Puedes asignarle un nombre como _variables.scss y escribir en él la declaración y asignación de variables en Sass de tu proyecto. Es importante destacar que el guión bajo le permite a Sass saber que el archivo es solo un archivo partial y que este sera llamado con la directiva @import desde el archivo principal .scss o .sass. Esto ayuda a ordenar, separar o modularizar a nivel de archivo tu código Sass.
• Import. La opción o directiva de importación @import te permite dividir junto con los archivos partials el CSS en partes pequeñas y fáciles de mantener. Solo hay un inconveniente que se detalla en la documentación oficial y es que cada vez que se utiliza un @import en CSS se crea otra solicitud HTTP.
• Nesting (anidamiento). Sass te permitirá anidar tus selectores CSS de una manera que siga una jerarquía visual de tipo HTML. Pero hay que tener en cuenta que las reglas excesivamente anidadas resultarán en CSS difícil de mantener y se considera una mala práctica. Así que no abusar de muchos anidamientos y sobre-anidamientos de tus selectores.
• Mixins. Un mixins es parecida a una función (semejante a la de un lenguaje de programación) que podrá ser usada en distintos selectores, lo que permitirá escribir valores o atributos CSS y reutilizarlos adecuadamente. Esto  es uno de los aportes que mencionaba que Sass ayudaba a hacer bloques de código de forma modular.
  
• Herencia. Esta es otra de las caracteristicas más utiles de Sass. Haciendo uso de la palabra reservada @extend te permite compartir un conjunto de propiedades CSS de un selector a otro.
• Operators. Sass ofrece un puñado de operadores matemáticos estándar como son: Adición (+), Sustracción (-), Multiplicación (*), División (/) y Modulo (%).

¿Al usar Sass también seguiré usando... CSS?

Efectivamente, si usas Sass seguirás escribiendo también CSS, el aporte de Sass es que enriquece al lenguaje CSS y ofrece herramientas o mecanismos que el propio CSS carecía o no tenia. Por lo que las ventajas de usar Sass beneficia mucho en la etapa del desarrollo y por supuesto al desarrollador/programador.

No te confundas seguirás usando CSS para la declaración de selectores y atributos, pero te permitirá ser más eficiente en la escritura de código por los mecanismos que ofrece Sass, es un plus no solo a nivel curricular.

Un consejo es que incluyas y aprendas el uso de un framework Fron-End para el desarrollo de tus proyectos donde te permita usar Sass, de mi parte yo aconsejo ZURB Foundation que ofrece apoyo con los grids para la maquetación de sitios web, así como también incluye Mixins propios de ZURB Foundation y muchas cosas más como: Panini, Handlebars, Abide y Motion UI que quizás más adelante hable de ellos por separado.

Otro framework Front-End que también te permite trabajar con Sass y ademas de ser el más pulular en su tipo es Bootstrap, este framework no solo te ofrece esta posibilidad ya que también te permite trabajar con Less, otro metalenguaje de hojas de estilo.

Considero que lo más difícil es comenzar pero una vez que te vayas adentrando a esto, observaras que escribir solo CSS ya no es eficiente en el desarrollo y mantenimiento de sitios web para la parte Front-End por lo que te convencerás en usar Sass por sus muchas ventajas.

Hay que ser pacientes ya que no se aprende y mucho menos se hace un experto en el manejo de estas herramientas de la noche a la mañana pero como dice el refrán... la practica hace al maestro.

Te dejo los enlaces a la documentación oficial de Sass y también de ZURB Foundation.