Para empezar a usar Sass en tu proyecto, primero necesitas instalarlo y configurarlo correctamente. En este capítulo, te guiaremos a través de los pasos necesarios para poner en marcha Sass en tu entorno de desarrollo, ya sea usando la línea de comandos o a través de herramientas de compilación.

Instalación de Sass

1. Instalación mediante npm

npm (Node Package Manager) es una de las formas más comunes de instalar y gestionar Sass. Sigue estos pasos para instalar Sass usando npm:

• Paso 1: Instalar Node.js y npm
  Primero, asegúrate de tener Node.js y npm instalados. Puedes descargarlos desde nodejs.org.

• Paso 2: Instalar Sass globalmente
  Una vez que tengas Node.js y npm instalados, abre una terminal y ejecuta el siguiente comando para instalar Sass globalmente:

  bash
  

2. Instalación mediante Homebrew (para macOS)

Si estás utilizando un Mac, otra opción es instalar Sass usando Homebrew:

• Paso 1: Instalar Homebrew
  Si no tienes Homebrew instalado, puedes instalarlo ejecutando:

  bash
  

• Paso 2: Instalar Sass
  Una vez que Homebrew esté instalado, puedes instalar Sass con el siguiente comando:

  bash
  

Verificación de la instalación

Después de instalar Sass, puedes verificar la instalación ejecutando el siguiente comando en tu terminal:

bash

Si todo está correcto, deberías ver la versión de Sass instalada.

Configuración de Sass

1. Creando un archivo SCSS

Para empezar a trabajar con Sass, crea un archivo .scss. Por ejemplo:

scss

2. Compilación de archivos SCSS a CSS

Sass necesita ser compilado a CSS para que los navegadores puedan interpretarlo. Aquí te mostramos cómo hacerlo usando la línea de comandos.

• Compilación sencilla
  Para compilar un archivo SCSS a CSS, usa el siguiente comando:

  bash
  

• Compilación en modo "watch"
  Para que Sass automáticamente compile el archivo cada vez que detecte cambios, puedes usar el modo "watch":

  bash
  

3. Configuración mediante un archivo de configuración (opcional)

Si deseas una configuración más avanzada, como especificar múltiples directorios de entrada y salida, puedes crear un archivo de configuración en forma de sass.config.js. Aquí hay un ejemplo de configuración básica:

js

Integración con herramientas de construcción

Sass se puede integrar fácilmente con diversas herramientas de construcción como Webpack, Gulp, y Grunt. Aquí te mostramos un ejemplo básico utilizando Gulp:

• Paso 1: Instalar Gulp y el plugin de Sass

  bash
  

• Paso 2: Crear un archivo gulpfile.js

  js
  

Con esta configuración, puedes ejecutar gulp en la terminal y Gulp compilará y vigilará tus archivos SCSS automáticamente.

Conclusión

Ahora que ya tienes Sass instalado y configurado en tu proyecto, estás listo para empezar a escribir y compilar archivos SCSS. En los próximos capítulos, profundizaremos en la sintaxis de Sass y sus características avanzadas para ayudarte a escribir CSS más eficiente y modular.