¿Cómo compilar mi código SASS?
Esta es la segunda parte de la nota, te comparto la primera que da más contexto sobre SASS.
Indice
- ¿Cómo vamos a compilar nuestro código SASS?
- ¿Qué es sourceMapping?
- ¿Qué otras formas hay para hacer esto?
¿Cómo vamos a compilar nuestro código SASS?
La estrategia más simple que vamos a usar para hacer esto es descargar la extensión ‘Live Sass Compiler’ que con un simple botón nos va a generar nuestro código CSS.
Una vez descargado y recargado VSCode, van a observar que abajo aparece un nuevo botón que dice ‘👁 Watch Sass’. Haciendo click en él, van a ver como automágicamente les va a crear dos archivos nuevos. Uno tiene la extensión de .css, que es el que vamos a usar para estilar, y otro es .css.map.
¿Qué es SourceMapping?
El source mapping es una estrategia que se viene utilizando (Sass lo hace a partir de la versión 3.3), que nos ayuda entender de dónde viene el código procesado y nos permite ver en instancia de debugging el código original.
Por ejemplo, si nosotros usamos TypeScript (que se compila a JavaScript), uno no vería el código en TS cuando esta debuggeando en el browser, vería el código procesado en JS. Este mismo problema se daría con Sass, y generaría mucha confusión porque uno tendría que switchear entre lo que uno codea con Sass y lo que se compiló.
Para resolver esto y poder llevar un trackeo de donde viene el código que se procesa existe el archivo con extensión .css.map.
¿Qué otras formas hay para hacer esto?
Existen otros programas que pueden hacer esto, pero la realidad es que la única opción viable es por consola. A diferencia de usar programas como Prepros, Koala y Scout-app ó compiladores online como SASSmeister, esta forma es más liviana, simple, escalable y controlada.
Para hacer esto, hay que entender primero cómo usar la consola. No voy a desarrollar acá el qué es y como usarla, pero te voy a explicar los pasos.
- Hay que tener npm instalado (https://www.npmjs.com/get-npm). Esta herramienta nos permite instalar diferentes paquetes, como en este caso Sass.
- Abrimos la terminal y iniciamos los paquetes npm con el comando
npm initEsto nos va a abrir la configuración de nuestro paquete. Por ahora con poner todo en yes va a estar bien.
3. Una vez que ya tenemos npm instalado e inicializado el proyecto, lo que queda es instalar el paquete de Sass.
npm install sass4. Si todo salió bien, tan sólo quedaría correr el comando para compilar nuestro archivo .scss a .css.
Para que quede más prolijo, vamos a agregarlo a los scripts de nuestro paquete dentro de nuestro package.json. Para esto vamos a entrar a nuestro archivo (que se generó cuando corrimos el npm init), y en la parte que dice scripts, vamos a agregar uno que diga sass.
6 | "scripts": {7 | "test": "echo \"Error: no test specified\" && exit 1",8 | "sass": "sass"9 | },
Esto nos va a permitir correr el comando de sass y agregarle así el archivo a compilar.
npm run sass input.scss output.cssDonde dice input.scss escribimos el nombre de nuestro archivo sass a compilar. Si está en una carpeta escribimos, por ej, npm run sass styles/input.scss styles/output.css (output.css es el nombre de ejemplo del archivo compilado, puede ser cualquier nombre).
Ahora, ¿cómo hacemos para que lo vaya compilando a medida que guardamos? Para esto es sólo cuestión de agregarle un “— watch” detras del sass. Para que nos quede más simple vamos agregarle también los nombres de los archivos, quedando algo así.
6 | "scripts": {7 | "test": "echo \"Error: no test specified\" && exit 1",8 | "sass": "sass"9 | "sass:watch": "sass --watch styles/style.scss styles/style.css"10 | },
Y una vez que corremos el script,
npm run sass:watchvamos a ver una leyenda que dice “Sass is watching for changes. Press Ctrl-C to stop”.
Esto lo que va a hacer es que cada vez que guardemos el archivo style.scss, que está en la carpeta styles, va a intentar compilarlo a css. Si tenemos errores no va a poder lograrlo y en la consola vamos a poder ver la leyenda del mismo.
Eso sería todo, si tenés algún feedback te invito a que lo comentes acá abajo! 😄
