SASS: Automatizá tu CSS

Logo de SAS junto al de CSS3 y el de Primer Empleo IT (PEIT)

Introducción.

Buenas! Seguramente estás arrancando a transitar tu carrera como desarrollador/a front end y, viendo las búsquedas laborales, te encontrás que, entre medio de JavaScript y CSS suelen nombrar una tecnología que NI te nombraron cuando arracaste un curso… Pero evidentemente es importante! Y ésta se llama SASS. “Qué es”, “para qué sirve” y “cómo se usa” vamos a aprenderlo a continuación:

Arranquemos por el final.

Seguramente en algún momento de tu carrera como frontender te sentiste tentado (y de hecho lo hiciste! A mi no me mientas!!) a aprender Bootstrap. Éste es un framework que te ayuda muchísimo a la hora de maquetar rápidamente una página. Pero trae algunos inconvenientes como que no podemos modificar ciertos aspectos como los colores. Si agregás un botón a tu plantilla y le decis que sea del color primary sabes que aparecerá en un “azul”. Sin embargo, un día llega tu cliente y dice “todo lindo con tu laburo pero la paleta de colores de mi branding dice que el color primario es el amarillo patito”, entonces no te queda otra que cambiarlo… Y acá aparece SASS!

SASS te permite trabajar con variables, funciones y mixins de forma tal que te ayudarán a cambiar las estructuras de tus archivos CSS. En el caso de bootstrap se puede ingresar a las variables generadas en el archivo _variables.scss, modificar los colores, transpilar y chadan! Nuevos colores en nuestro Bootstrap en dos pasos!!🤪

Ahora que te das una idea para qué sirve vayamos al tuto del día.

NOTA: Si estás arrancando o aún te falta aprender a desarrollar páginas web, te invito a que me escribas a fernandomatiasdv@gmail.com ya que próximamente estaré dando inicio a una nueva camada en el curso “Desarrollador Front End”.

Instalación.

Los navegadores “no entienden” SASS por lo que deberemos instalar el paquete de SASS pero ANTES debés tener instalado NPM, que es el gestionador de paquetes de nodeJs. Asi que, sino tenés instalado node ingresá a https://nodejs.org/en/ y seleccioná la versión LTS (ya que es la estable), luego de descargarlo hace siguiente, siguiente, siguiente y ya lo tenes instalado!

Para probarlo andá a la ventana de comandos de windows: Presioná la tecla Windows+R y, en la ventana que te aparece, escribí cmd y enter.

Les aparecerá el símbolo de sistema, entonces vos escribirás

npm --version

Y, con que te figure un número, va a estar todo bien! El problema es si te lanza un error (que aparecerá en letras rojas). En este caso tendrás que ver qué te falló al instalar node.

Ahora si, vamos a instalar SASS. En esta misma ventana escribí:

npm i -g sass

Cómo funciona SASS.

SASS es un lenguaje de scripting que generará archivos CSS como salida. Los archivos que maneja tienen la extensión .scss (antiguamente eran .sass). Para que corran deberás correr la sentencia:

sass --watch path_inicial_scss:path_destino_css

En donde path_inicial_scss es la ubicación en donde se encuentran los archivos .scss

y path_destino_css es donde se alojarán los archivos css resultantes.

Pero esta idea se entiende mejor cuando nos ponemos a codear, para ésto te voy a pedir que tengas una estructura similar a esta:

nombre_de_tu_proyecto
└ index.html
└ CSS
  └ tus_estilos.css
└ SASS
  └ tus_estilos.sass

Y ahora, desde la línea de comandos situado en nombre_de_tu_proyecto (o el nombre que le hayas puesto, en mi caso voy a dejar ese!), escribí

sass --watch sass:css

De esta forma SASS “se quedará observando” las modificaciones que vayas guardando en la carpeta “sass” y, por cada cambio, transpilará (transformará) el código de tu archivo SASS en un archivo CSS con el mismo nombre dentro de la carpeta CSS.

¡A codear!

Para arrancar comenzá haciendo una clase llamada cajita que contendrá:

Ancho de 250px;
Alto de 100px;
color de fondo Aquamarine

PERO a esta clase CREALA EN mis_estilos.scss, es decir en tu archivo SASS! Luego guardá, si tenías encendido el “watch” verás lo siguiente:

Ahora andá a mirar tu archivo css/mis_estilos.css. Verás el mismo código 😅 Tanto lio para eso! Igual tranca que ya vamos al hueso !!

Antes de seguir, asegurate de haber creado el div con la clase cajita en tu index.html y de haber linkeado tu css (no tu sass!!!)y verificá que te muestre este resultado:

Enlazando estilos.

Dentro del div armá un párrafo con el texto “Hola SASS”. Y a SASS encerrala en un span, debería quedarte así:

<div class="cajita">
  <p>Hola <span>SASS</span></p>
</div>

Y en tu archivo mis_estilos.scss escribí:

Al guardar te va a generar este archivo:

Y el resultado es este:

De esta forma podemos encadenar varias clases y no tenemos que andar escribiendo decenas de lineas repetidas.

Variables.

Las variables son espacios de memoria reservadas para almacenar información.
Para generar una variable en SASS necesitamos escribir
$nombre_variable: valor_que_tomara_la_variable
Luego lo podemos pasar a las clases y serán reemplazados.

Para ejemplificar modifiquemos el código anterior:

En este ejemplo declaré las variables: $tamanio25, le asigné el valor 25px y se lo pasé a los paddings (líneas 11 y 12) y al font-size (linea 13).
Luego generé las variables color1, color2 y color3 y las reemplacé en las líneas 9, 14 y 16, respectivamente.
Cuando guardé se me generó el archivo mis_estilos.css (en realidad ya estaba generado y tenía esos valores pero si querés validar como cambia aumentale el valor a $tamanio25, pasale un 40px y verás como se modifica.

MIXIN

Viste que en una variable podías guardar un dato? OK! Con los mixins podés guardar un bloque de datos:
Suponete que tenés una clase que contiene estos atributos:

color: white;
width: 100%;
height: 300px;

Pero, por esas cosas locas de la vida, tenes que generar otra clase con los mismos atributos (y sabes que, si llegan a cambiar algún valor, asi como se podría eliminar un dato o sumar otro también debería verse implementado en la nueva clase) entonces necesitas crear un mixin!

Y ahora solo tenés que llamar a este mixin dentro de tu clase utilizando @include:

En este caso, por un lado tenemos creado el mixin “clase_padre”;

Por otro tenemos a la clase “clase_hijo1” que hereda completamente el contenido de “clase_padre”;

Y, por el otro, tenemos a la clase “clase_hijo2” que hereda todo el contenido de “clase_padre” y además le da sus propios estilos.

Al transpilar esta hoja de estilos nos da el siguiente resultado:

MIXIN con parámetros.

Desde una clase hijo le puedo decir qué valores quiero darle a cada uno de los atributos de la clase padre. A esto se lo conoce como parámetros, y estos valores (o parámeotros) son tomados en la definición del mixin para luego ser pasadas a sus atributos. Vayamos por partes.

Tenemos la clase clase_hijo1:

.clase_hijo1 {
  @include clase_padre(red);
}

Para pasarle los valores a la clase padré lo haré a través de paréntesis. En este caso le estoy pasando “red”.
Ahora veamos la clase_padre:

@mixin clase_padre($color) {
  color: $color;
  width: 100%;
  height: 300px;
}

En este caso debemos agregarle los paréntesis al final del nombre del mixin y generar una variable (con el signo $).
Luego, a esta variable, la escribiremos donde queremos reemplazarlo. En este caso, en color.

Antes de guardar comentá la clase clase_hijo2, ya que va a fallar (no le estamos enviando el parámetro). Una vez que la hayamos comentado guardá. Y ahora sí fijate como se te generó la clase clase_hijo1 con el color “red” en lugar del white que teníamos anteriormente creado.

Pero bien, tuvimos un inconveniente y es que comentamos la generación de la clase clase_hijo2 ya que no le habíamos pasado el parámetro. Lo que podemos hacer es generarle un valor por defecto al parámetro color de la clase_padre. Para ésto agregale a $color un : y el valor por defecto, por ej:

@mixin clase_padre($color: white) {
  color: $color;
  width: 100%;
  height: 300px;
}

Ahora si, descomentá clase_hijo2 y volvé a guardar. El color que te pondrá por defecto será el blanco.

Como tarea te animo a que le pases el alto y el ancho por parámetro y pruebes si te funciona. Por las dudas agregale un valor por defecto a cada uno.

Import.

Por lo general, en los desarrollos medianos/grandes, se suelen usar variables para controlar los colores así como los disversos tamaños (como ya lo vimos en el apartado de variables) y éstas no suelen estar en el mismo documento que generan las clases, por lo que debemos llamarlas desde donde nos encontremos. Para ésto usaremos @import.

Para comenzar generá un archivo llamado _variables.scss (DEBE tener el guión bajo adelante, el nombre puede variar y la extensión debe ser scss), que contendrá:

$colorPrimario: red;
$colorSecundario: green;
$tamanio100: 100px;
$tamanio250: 250px;;

Luego armá el archivo estilos.scss, que contendrá:

@import variables;
.caja{
  background-color: $colorPrimario;
  color: $colorSecundario;
  width: tamanio250;
  height: tamanio100;
} 

Fijate que este archivo hace el llamado al import (que nos traerá todas las variables PERO, al escribirlo, NO debe llevar el guión bajo ni tampoco la extensión.

Guardá y fiajte cómo se genera el archivo estilos.css con la estructura de la clase y los valores que tenemos en el archivo _variables.scss.

Comentarios finales

Hasta acá vimos las principales funcionalidades de SASS. En el próximo artículo te voy a enseñar a modificar Bootstrap (ya que, sino, me queda gigante este tuto).

Y si querés aprender desde cero el desarrollo web preguntame a mi casilla de mail fernandomatiasdv@gmail.com cuando arranca la próxima cursada.