5 min de lectura

¿Por qué SASS?

Con el paso del tiempo, el diseño visual de los sitios web ha llevado al desarrollo de tecnologías distintas para poder hacer que estas sean amables y atractivas a nuestros exigentes ojos humanos, y producto de esto, nacen las hojas de estilo para poder cumplir con estas exigencias. Desde este concepto nace CSS y ha sido el lenguaje de hojas de estilo que ha prevalecido con el tiempo hasta hoy en día.

CSS puro es por sí solo ya bastante útil, sin embargo, conforme los proyectos de desarrollo web van creciendo, también lo hacen las necesidades de estilo, y aquí es cuando varias de las carencias de CSS salen a relucir. Se vuelve molesto de mantener, difícil de modularizar, y tratando de lograr esto último, hasta poco intuitivo de implementar.

SASS es una tecnología que pretende solucionar estas carencias de CSS puro, facilitando el desarrollo y el mantenimiento del código de CSS para un proyecto. Así, Sass se ha ganado su merecido lugar en la industria y entre los desarrolladores de front end por las razones mencionadas, así que resulta muy conveniente aprender utilizar esta tecnología.

Pero, ¿qué es SASS?

SASS (por Syntatically Awesome Style Sheets) es un preprocesador de CSS que permite utilizar muchas funcionalidades que no están disponibles en CSS puro, y así facilitar enormemente el trabajo que se tiene que hacer con CSS cuando se trata de hacer un código mantenible. Por ejemplo, entre las cosas que SASS permite hacer está manejar variables, utilizar operadores aritméticos, anidar reglas, manejar herencias y modularizar código de CSS en distintos archivos. En esencia, Sass es una herramienta que facilita el tener un código DRY (Don’t repeat yourself) y más fácil de mantener.

Instalar Sass

Para instalar Sass existen diversas formas de hacerlo. El método que yo voy a utilizar para este tutorial, es la instalación del script disponible en el repositorio de Github oficial para poder utilizar la aplicación desde la línea de comandos sin necesidad de un intermediario. Para hacer esto, seguimos los siguientes pasos:

1. Descarga el paquete de Github que corresponda al sistema operativo en el que se esté trabajando. Seguido de esto, es necesario extraerlo.
2. Después, mientras que teóricamente no es necesario, pero sí facilita mucho el trabajo, se puede añadir al PATH del equipo el script de la herramienta para facilitar la utilización de ésta. De hacerlo así, entonces escribiendo en la terminal sass se apreciará un resumen de cómo utilizar Sass, de cualquier otra forma, hay un error con la configuración del PATH. Si deseas no incluirlo en el PATH, entonces cada vez que se desee utilizar la herramienta se tendrá que escribir la dirección a donde esté guardado Sass.

Utilizar Sass y compilar a CSS

Para utilizar Sass, se crea un archivo con extensión .scss  y después se convierte a uno con extensión .css .

Para lograr esto utilizando Sass, se utiliza el comando sass entrada.scss salida.css , donde evidentemente, nuestro archivo entrada.scss  será el archivo que editaremos y será procesado por Sass, y salida.css  será el archivo que incluiremos finalmente en nuestro HTML como cualquier archivo CSS normal.

Variables en SASS

Las variables en Sass funcionan tal como esperaríamos que funcionan en un lenguaje de programación típico. Las variables, se declaran de la siguiente forma: $variable: /*Valor*/

Esta característica es sobre todo útil cuando queremos probar valores distintos a través de nuestro código CSS o que son difíciles de recordar. El caso más común, pues bien, probar distintos colores.

SCSS:

CSS resultante:

Nesting en SASS

“Nesting” o la anidación es una característica que hace que CSS sea más intuitivo, ya que permite que vaya más de la mano con la estructura de árbol por la que se conoce HTML.

SCSS:

CSS resultante:

Mixins en SASS

Los “mixins” son nuestro equivalente a funciones en el caso de Sass. Para declarar nuestro “mixin” se utiliza la sintaxis @mixin ejemplo-mixin($arg1, $arg2, ..., $argN) , por ejemplo:

SCSS:

CSS resultante:

Partials e imports en SASS

Una parte muy importante de Sass es que es posible modularizar los proyectos de CSS en varios archivos para facilitar su mantenimiento. Estos archivos extra se conocen como partials, y tienen que estar nombrados con un guión bajo al principio del nombre del archivo, por ejemplo _partial.scss . Para incluirlo en tu archivo principal se utiliza @import .

SCSS en _partial.css :

SCSS principal:

CSS resultante:

Herencia y extends en SASS

La herencia y la palabra reservada extend sirven para poder utilizar ciertas propiedades entre selecciones de CSS que vayan a repetirse entre estas. Esta función nos sirve para mantener nuestro código DRY.

SCSS:

CSS resultante:

Operadores en SASS

Es posible utilizar operadores aritméticos con Sass a como estamos acostumbrados en los lenguajes de programación usuales. +, -, *, / y %

Sass lo traducirá a un resultado al momento de convertir el código a CSS.

SCSS:

CSS resultante:

 

Descarga los ejemplos de SASS

El proyecto donde se implementaron estos ejemplos se puede encontrar aquí.

 

 

Sobre todo con un background de programación, podemos entender fácilmente como utilizar Sass puede ayudar a que nuestros proyectos tengan un crecimiento orgánico. Estas utilidades de Sass son lo básico de lo más básico, siempre se puede aprender más sobre esta herramienta y hay muchas otras cosas que se pueden aprender en su página oficial.