Introducción al SASS

Sass es una extensión de CSS que agrega potencia y elegancia al lenguaje básico, como lo describe Sass en su documentación. Se trata de un procesador de hojas de estilos dinámico e introductorio a conceptos de la programación como las variables, funciones, iteradores, bucles, condicionales, entre otros.

Entre otras cosas, Sass permite importar hojas de estilo, escribir partials, anidar reglas, reutilizar código gracias a los mixins, herencias, operaciones matemáticas y mucho más.

Sass trabaja escribiendo sus estilos en archivos .scss (o .sass), donde se compila en un archivo CSS normal. El archivo CSS recién compilado es lo que se carga en el navegador para darle un nuevo estilo a su sitio web.

Sintaxis y otros alcances sobre Sass

Este lenguaje dispone de dos formatos diferentes para su sintaxis:  Sass y Scss. Sass, tiene la extensión .sass y se caracteriza por utilizar indentación en lugar de corchetes. No utiliza punto y coma y aunque no es totalmente adaptable a la sintaxis CSS, es más rápido de escribir por su  simplicidad.

Scss, es un superconjunto de sass y CSS que da una sintaxis compatible con CSS, donde cada CSS válido también es apto en scss. Sin embargo, la sintaxis más utilizada sigue siendo scss, por lo que cuando hablamos de sass, nos estamos referimos a scss.

Sintaxis SASS

Sintaxis SCSS

¿Qué podemos hacer con Sass?

Antes de iniciar un proyecto con sass es importante conocer sus componentes. Por ello, describimos la funcionalidad de las variables, anidamiento, parciales, importaciones, mixins, herencia y operadores, dentro del lenguaje.

• Variables: Tal y como se hace en muchos lenguajes de programación, podemos almacenar información en una variable. Posteriormente, podemos reutilizar esta información a través de las diferentes hojas de estilos.
  Dentro de esta variable podemos almacenar hexadecimal, números, pixeles, cadena de caracteres, booleanos, listas, mapas, entre otros. Esta es una ventaja, ya que asignamos el valor de un color en una variable al principio de un archivo y luego usamos esta variable cuando configuramos el color de nuestros elementos. Esto permite cambiar rápidamente los colores sin tener que modificar cada línea.

 Variables

Resultado del compilado del CSS del ejemplo de variables

• Anidado: Nos permite anidar los selectores CSS imitando la jerarquía visual de HTML. Además, nos permite agrupar los estilos en componentes y asegurarnos de que sea mucho más fácil de leer. También, nos ayuda a reducir la cantidad de código que necesitamos escribir y mejorar la legibilidad. Sin embargo, esto es algo que debemos manejar con cuidado y no abusar de los estilos anidados. Se recomienda no pasar de tres niveles de profundidad con su anidación.

Anidado

Resultado compilación CSS del ejemplo Anidado

• Parciales: Nos permite tener trozos de códigos para luego incluirlos en otros archivos sass. Los archivos parciales están considerados por sass con solo añadir un subrayado al comienzo de su nombre. Por ejemplo: _reseter.scss o _variables.scss. Los parciales serán incluidos en otros archivos usando: @import.
• Importaciones: El uso de @import nos permite importar archivos parciales en el archivo actual construyendo un único archivo CSS. El @import es diferente en sass que en CSS, ya que en una hoja de estilos CSS, se realiza una nueva llamada al servidor para cargar otra hoja de estilo y esperar a que se cargue para aplicar los nuevos estilos. En sass es diferente, ya que la importación en un archivo .scss o .sass se produce durante la compilación. Además, no tenemos por qué poner la extensión del archivo.
  Ejemplo: En nuestro archivo main.scss tendremos importado todos los archivos sass de la carpeta components, los cuales contienen los partials que construyen nuestros estilos.

 

• Mixins: Un Mixin es un bloque de código que nos permite agrupar las declaraciones de CSS que podemos reutilizar en nuestro sitio. La gran ventaja de los mixins está en que podemos pasar argumentos, los cuales se declaran como una lista de variables dentro de un paréntesis. A cada una de estas variables se le asigna un valor cada vez que se usa el mixin. De esta forma, no se genera un código repetido cada vez que lo usemos, ya que gracias a los argumentos podemos obtener un código singular para cada caso.
  Por ejemplo, un Mixin sencillo para border-radius:

 Mixin con argumentos

Resultado de la compilación css del ejemplo de Mixin con argumentos

Como se aprecia en el ejemplo anterior, la forma de incluir un mixin es usando la directiva @include seguido al nombre del mixin y opcionalmente una lista de argumentos. Como resultado tendremos todos los estilos definidos en mixin insertado en el lugar donde se insertó el mixin.

Mixin

Resultado de la compilación css del ejemplo de Mixin

• Herencia / Extend: Se trata de una característica que permite que los selectores puedan heredar los estilos de otros selectores. De esa forma, no tenemos que repetir códigos, haciendo el trabajo más rápido, eficiente y fácil de mantener. Se pueden compartir las propiedades de un selector a otro usando @extend.

Uso de @extend, herencia

Resultado de compilación de ejemplo herencia

• Operadores: Sass nos permite crear rápidamente cálculos matemáticos en nuestra hoja de estilos, donde por ejemplo, podremos convertir valores pixel a porcentajes. Podemos usar los operadores más comunes como suma, resta, multiplicación y división. Estos operadores combinados con las funciones preconstruidas como percentage() , floor() y round() te ayudara mucho a manipular números.

Como podemos ver, sass es un gran modo para crear rápidamente y organizar nuestro CSS. Por eso, extiendo la invitación para que puedan poner en prueba algún procesador de CSS y conocer sus características y múltiples ventajas a la hora del desarrollo front end. Si quieres conocer más, entonces visita el sitio oficial de sass.