Como crear proyecto Sass desde cero con prepros.io en windows 10

Hola, reciban todos un cordial saludo. Este tutorial tiene como foco crear un proyecto Sass desde cero.

Lo primero que deben hacer es descargar prepros.io para windows y una vez lo tengan descargado, lo instalan y ejecutan como administrador preferiblemente.

• El primer paso crucial es identificar en nuestro sistema operativo un lugar donde crear el proyecto Sass desde cero, en mi caso, lo hice desde mis Documentos, en la ubicación que queramos, les comparto una captura de pantalla con la carpeta vacía:

• Una vez tengamos ejecutado prepros en nuestro sistema operativo, redimensionamos la ventana hasta la mitad para poder arrastrar la carpeta vacía que creamos en el paso anterior hasta el área que señalo en la siguiente captura de pantalla:

• Como siguiente paso, es crear 2 subdirectorios dentro de la carpeta: “proyecto-tuto”, en este caso las nombraré:
  “css”, “scss”, dentro de SCSS estarán nuestros ficheros scss con un subdirectorio llamado “lib” y será responsable de contener aquellos ficheros scss como archivos parciales responsables de los estilos para los componentes visuales que queramos agregar en particular, por ejemplo, cuando almacenamos el fichero “_variables.scss” dentro de dicha carpeta, el aspecto que tendrá nuestro proyecto base debería ser como:

• Una vez hayamos arrastrado la carpeta principal de nuestro proyecto hacia prepros.io, Seleccionamos la opción: “Settings”, la cual señalo también en la siguiente captura de pantalla:

• Dentro de “Settings”, nos dirigimos a: “compiler Settings” => “Sass” y en la parte derecha de la ventana de Prepros.io, hacemos un poco de scroll hasta encontrar la opción “Output”, esta parte es de vital importancia para poder definir la ruta destino despues de compilar los ficheros scss y formar un único fichero css, dentro de la carpeta CSS.

• Ahora dentro de la carpeta raíz “Scss”, creamos un fichero Scss llamado: “main.scss” y dentro creamos cualquier declaración tipo “SCSS”:

@import"lib/variables";

/* usamos la variable */
.selector-test{
    background: $color-gris-claro;
}

• Dentro de “scss/lib”, creamos el fichero: “_variables.scss” el cual es el que importamos desde el fichero principal “main.scss”:

/* Variables */$color-gris-claro: #d1d1d1;

• Ahora una captura de pantalla de como queda nuestro proyecto abierto desde el IDE de nuestra preferencia (en mi caso uso VSCode):

• Ahora bien, basta con guardar cambios para que automáticamente compile los ficheros SCSS hacía la carpeta “CSS” como Output tal y como configuramos en el paso previo como la ** carpeta de salida**.

• Si todo sale bien, podremos ver en formato CSS la salida de todo el código compilado:

Y listo compañeros! ya con esta configuración base podremos seguir con normalidad el contenido del curso de Sass, espero que haya aportado algo para quienes tienen problema con este tipo de configuraciones.
Saludos.