¿Qué es Sass?

Sass es un procesador CSS

Tenemos dos maneras de trabajar con Sass:

1-mediante aplicaciones 

2-mediante línea de comandos

En nuestro caso vamos a utilizar Node.js para instalar y configurar Sass. Para ello, instalamos primero Node.js y posteriormente comprobamos que lo tenemos instalado:

node -v
npm -v

Si nos aparece la versión quiere decir que lo tenemos instalado correctamente. A continuación, procedemos a instalar el paquete de Sass mediante Node y NPM.

npm install -g sass //-g es para instalar de forma global el paquete

Si estas en Linux y no te funciona correctamente, instala este paquete:

sudo apt-get install ruby-sass

Tenemos dos maneras de guardar un fichero de Sass, la primera es con la extensión: .scss o bien .sass.

Cuando queramos enlazar nuestro HTML con nuestro fichero Sass no lo podemos hacer directamente, primero tenemos que generar un fichero CSS a partir de nuestro fichero de Sass y es este fichero generado el que enlazaremos con nuestro HTML.

¿Cómo generamos el fichero style.css mediante el fichero de sass?

Para generar este fichero solo tenemos que colocar el siguiente comando.

 sass --watch nombrefichero.scss nuevaconversion.css

Si por alguna razón el comando de arriba falla, usa este de abajo:

ss --watch nombrefichero css:nuevaconversion.css

Con esta línea de comando indicamos que vamos a utilizar sass para convertir un fichero de sass a un fichero de css el cual se va a ejecutar cada vez que yo guarde los cambios en mi fichero de sass gracias al --watch.

¿QUÉ PUEDO HACER CON SASS?

-Crear variables

-Anidar

-Módulos (Es importar un archivo dentro de otro) "@use 'nombrefichero.sass-scss'"

-Mixin (Son funciones o también conocida como agrupación de instrucciones) @mixin nombre($parámetro , $opcionales){} "@include nombre Mixin"

-Herencia (Heredamos unas características de una clase) %nombre-clase {} "%extend %nombre-clase;"

-Operadores (suma - resta - multiplicación - división - etc....)

-Condicionales (if - else if - else)

-Bucles (while - for - each)