Si como yo estas empezando en el desarrolo web y has decubierto el poder de los preprocesadores como Sass 💜, te mostraré una forma en la que puedes compilar tu código de Sass automáticamente sin necesidad de instalar alguna aplicacion adicional, solamente usando nuestro viejo y confiable editor de codigo!
Lo único que necesitas es tener tu editor de código Visual Studio Code!
Sea cualquier cosa a la que te dediques, es importante sentirte cómodo con las herramientas que utilizes en tu día a día, y Visual Studio Code es una herramienta altamente personalizable, con opción de añadirle super poderes que nos ayuden a que nuestro flujo de trabajo mas productivo gracias a sus extensiones.
Si aun no lo tienes, te recomiendo probarlo, te aseguro que como yo quedarás encantado con sus funcionalidades.
Si tienes duda de como instalar esta herramienta en tu computadora, puedes consultar el curso de Prework donde puedes conocer como hacerlo en tu sistema operativo.
Muy bien! Ahora que ya tienes tu editor de código vamos a necesitar dos extensiones que nos ayudarán a darle superpoderes a Visual Studio Code y que los cambios se reflejen automáticamente.
La primera de ellas…
Es una extensión que nos despliega un servidor de desarrollo local, el cual nos muestra en el navegador nuestro proyecto y se refrescará automáticamente cada que realizamos y salvemos cambios en nuestro proyecto.
Para instalarlo en nuestro editor de código es realmente fácil, lo único que tienes que hacer es:
Sabrás que es la correcta por que es la primera opción y tiene mas de 15 millones de descargas, pero si aun tienes duda te dejo acá el enlace al marketplace para que puedas descargarla.
Una vez instalado Live Server notarás que en la parte inferior derecha de tu editor tienes un icono nuevo, el cual dice Go Live. Si no logras verlo no te preocupes, seguramente basta con reiniciar tu editor de código para que la extensión se añada correctamente.
Ahora puedes abrir un proyecto web con html, css y javascript en tu editor, y procedemos a activar la extension, podemos realizar este paso de varias formas:
ctrl + shift + p lo cual deplegará la paleta de comandos de Visual Studio Code, solo busca Live Server y elige la opción de “Abrir con Live Server”, tambien te mostrará el shortcut para que puedas activar la extensión.Una vez activa, te abrirá un navegador con tu projecto, el cual ahora estará en un servidor de desarrollo local (notarás que la url es 127.0.0.1 tambien conocido como localhost).
Este servidor de desarrollo local estará atento a los cambios que salves en tu código y refrescará automáticamente cada vez detecte alguno.
Si si, muy bonito, y mi Sass?
Bien, ahora para que puedas compilar de la misma forma tu codigo Sass, le añadiremos más poderes a nuestro editor de código con otra extensión.
Esta extensión nos ayuda a complilar nuestros archivos sass/scss a código css en tiempo real sin necesidad de depender de otras aplicaciones que nos limiten el tiempo de uso o requieran de una licencia.
Para instalar Live Sass es muy sencillo, hay que seguir los mismos pasos que realizamos anteriormente con Live Server:
Ubicar el icono de extensiones de Visual Studio Code.
Escribir en el buscador de extensiones Live Sass.
Dar click en “instalar”.
Sabrás que es la correcta por que es la primera opción y de echo es el mismo desarrollador de Live Server, acá te dejo el enlace directo al marketplace.
Al igual que con Live Server, al abrir un archivo de Sass, notarás un icono en la parte inferior derecha que dice “Watch Sass” el cual activa la extensión.
Al activarla se desplegará una terminal que te mostrara el log de lo que compila y estara atenta a los cambios que realizes en tus estilos.
Al estar atenta a los cambios, la extensión te notificará si todo estuvo correcto y compiló satisfactoriamente ✅, de lo contrario te mostrará un error ❌.
No te preocupes y recuerda que los errores son nuestros amigos, pues nos muestran en que nos equivocamos, Live Sass te mostrará donde esta el error.👍
De esta forma no volverás a preocuparte por compilar tus archvos, Live Sass lo hará por ti!
.
.
.
Si llegaste hasta acá te tengo una sorpresa!.
Si como yo, quieres mantener el orden en tu código separado por carpetas, te tengo la solución.
Live Sass nos permite configurar el path o ruta donde queremos que coloque los archivos de css que generó, para ello seguiremos los siguientes pasos:
Vamos a los Settings de Visual Studio Code
En Settings buscamos extensiones y dentro ubicamos Live Sass Compiler
Una vez ubicada la extensión, buscamos la parte de formats y damos click en editar json .
Esto nos abrirá un archivo donde estan las configuraciones de formato, extensión y ruta.
No te preocupes, solo realizaremos una configuración sencilla. 😉
En "save path" colocaremos la ruta donde queremos que nos guarde los archivos css generados, si no existe esta carpeta en tu proyeto no te preocupes, la extensión la creará por ti, en mi caso quiero que se guarde en una carpeta llamada css, así que solo reemplazaré lo que viene por defecto a "./css", quedando de esta forma:
{
"format": "expanded",
"extensionName": ".css",
"savePath": "./css"
}
Guardamos los cambios y de esta manera, cuando trabajemos con la extensión, nos creará una carpeta aparte que contendrá los archivos de css, permitiendonos tener mejor ordenados nuestros archivos en nuestro proyecto.
Ahora solo recuerda que en tu html debes indicar la ruta exacta de donde se encuentra tu hoja de estilos.
¿Qué te ha parecido? Dejame saber que tal te funcionó y si tuviste alguna dificultad al momento de segir los pasos, estoy seguro de que esto agilizará tu flujo de trabajo como desarrollador. Me gustaría saber que otras extensiones conoces y recomiendas para agilizar nuestro flujo de trabajo al desarrollar.
🚀Recuerda nunca parar de aprender! 💚
Amigo estaba buscando esta Extensiónd esde hace tiempo, gracias por e l aporte!! 😁