jairogarcíarincón

Instalación

3.02K
Instalación
15/06/2021

Contenidos

  1. Introducción a los pre-procesadores
  2. Instalación
  3. Configuración
  4. Evaluación Bloque 1
  5. Solución Evaluación Bloque 1
  6. Sintaxis y reglas
  7. Variables
  8. Operadores
  9. Tipos de datos
  10. Evaluación Bloque 2
  11. Solución Evaluación Bloque 2
  12. Ejercicio 1
  13. Solución Ejercicio 1
  14. Ejercicio 2
  15. Solución Ejercicio 2
  16. Funciones
  17. Interpolado
  18. Reglas y directivas básicas
  19. Directivas de control y heredadas
  20. Evaluación Bloque 3
  21. Solución Evaluación Bloque 3
  22. Ejercicio 3
  23. Solución Ejercicio 3
  24. Ejercicio 4
  25. Solución Ejercicio 4
  26. Ejercicio 5
  27. Solución Ejercicio 5
  28. Ejercicio 6
  29. Solución Ejercicio 6
  30. Ejercicio 7
  31. Solución Ejercicio 7
  32. Encuesta

Entornos de desarrollo

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 para Windows 10.

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.




Instalación

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):



Cuando terminen ambos procesos, puedes comprobar que se han instalado correctamente con los comandos:



3. 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, incorporan funcionalidades para optimizar el desarrollo con Sass,, como es el caso de Webpack en el caso de Laravel.

Referencias

Publicado el 30 de Junio de 2022

csscss3sassscsslesspreprocesadores

Anterior
Siguiente