jairogarcíarincón
Como hemos comentado anteriormente, se requiere de un pre-procesado para poder utilizar archivos SASS, SCSS o LESS en nuestro sitio web.
Para el presente curso, partimos de la base de tener instalado y funcionado el entorno de desarrollo gratuito Visual Studio Code.
De no ser así, accede al Área de descargas de Visual Studio Code, selecciona la versión adecuada a tu sistema operativo e instálala en tu ordenador.
Existen varias maneras de llevar acabo dicha tarea:
1. Mediante el uso de aplicaciones gratuitas o de pago.
Es mas sencillo empezar pero más complejo de integrar en nuestros entornos de desarrollo:
2. Mediante la línea de comandos.
Es más complejo de configurar pero mucho más sencillo de integrar después en nuestros entornos de desarrollo.
Para ello, debemos instalar SASS o LESS (o ambos) en nuestro equipo. Si bien se puede descargar SASS (SCSS está incluido dentro de SASS) directamente desde su GitHub, lo mas recomendable y compatible hoy en día es usar el entorno de ejecución para Javascript Node.js para la instalación de paquetes de terceros, ya que si bien es algo más lento, se está convirtiendo en un estándar.
Por tanto, accede a Node.js, descarga e instala (con las opciones por defecto pero sin incluir las tools adicionales si quieres ir más rápido) la última versión de tipo LTS (Long Term Support) que encuentres.
Una vez instalado Node.js, accede a una Consola de Windows y ejecuta lo siguiente (el parámetro -g hará que la instalación sea global, esto es, que podamos usar el programa desde cualquier ubicación):
npm install -g node-sassCuando terminen ambos procesos, puedes comprobar que se han instalado correctamente con los comandos:
node-sass --version3. Mediante el uso de un plug-in "en vivo" para Visual Studio Code.
En el caso concreto de Visual Studio Code, es posible utilizar un plug-in gratuito que, sin mayor configuración, permite trabajar con archivos *.sass y *.scss y procesarlos en tiempo real.
Para conseguirlo, debemos acceder a la página del plug-in Live Sass Compiler y pulsar el botón Install, o bien acceder en Visual Studio Code a la gestión de extensiones (Ctrl + P) e introducir ext install live-sass:
4. Mediante el uso de frameworks de desarrollo.
Algunos frameworks de desarrollo y/o librerías incorporan funcionalidades para optimizar el desarrollo con Sass, como es el caso de Webpack, Vite o Tailwind o Angular.
Publicado el 21 de Noviembre de 2024
csscss3sassscsslesspreprocesadores