Anatomía de un proyecto de SASS e instalación y configuración del entorno de trabajo

Cuando ejecuten el comando :
.

• Ctrl + Shift + P verifiquen que ejecutan “Live Sass: Watch Sass”

.

Que felicidad cuando todo funciona correctamente!

Para que el CSS no te guarde en una carpeta random, cambia la ruta de guardado a esta:

"savePath": "~/../css",

Lo anterior iría en el settings.json, así siempre te va a guardar en la carpeta que es y no depende desde dónde hayas abierto el VSC 🙌😀

El proceso de Compilado

.
Para hacer uso de SASS dentro de nuestro proyecto tenemos que tener en cuenta 3 puntos importantes que forman parte del proceso de compilación.
.

• Imput file (archivo de entrada) —> Es donde vamos a escribir nuestros estilos haciendo uso de la sintaxis de Sass, incluyendo la extensión .scss en el nombre del archivo.
  .
• Output file (archivo de salida) —> Es donde se colocarán los estilos finales con CSS nativo, que provienen del archivo de entrada. (nunca se debe editar directamente el archivo de salida)
  .
• Los comandos para ejecutar y compilar Sass —> Hay varias formas de ejecutar y compilar Sass, cada una con sus propios comandos y herramientas. La elección del método dependerá del entorno de desarrollo y las preferencias personales del desarrollador.

Hola, me demore un poco pero encontre la forma de visualizar los stilos… en la parte inferior encuentras
Watch Sass
y ahora si puedes ver tus stilos
Genial… !!!

Comparto mis notas en un archivo doc en Google Drive al que tienen acceso como ´viewers´. Me resulta más sencillo hacerlo así que añadir mis comentarios en Platzi, debido a que ahorro mucho más tiempo.
.
https://docs.google.com/document/d/1AxJgQwBUo_b_yyKBC7Rf7FPMmStLcOuxKRU0xba6d98/edit?usp=sharing
.
Son archivos a los que suelo volver y editar con nuevos conocimientos e incluso borrar y reasignar en nuevas rutas para ordenar mi carpeta de archivos y por tanto mi “blioteca de conocimiento”.
.
Por ello, siéntete libre de hacer duplicado del archivo y copiarlo y pegarlo en uno de tus documentos propios.
.
Saludos.

todo salio bien que bendicion aaah

Todo iba bien hasta que apareció Live Sass compiler.

Hay algo raro con los vídeos de los nuevos cursos de platzi…tienen problemas de optimización de carga. si de verdad están interesados en llegar a todo tipo de personas, es importante que revean la tecnología con la que están trabajando al momento de visualizar los vídeos…sería muy bueno que le peguen una debuggeada porque no esta siendo muy efectiva la experiencia de usuario.

Existe un extension que se llama live preview es mucho mejor que live server, saludos !

Estructura de proyecto SASS

tengo un problema y me aparece esto en settings.json saben que deo de hacer espero me ayuden, gracias

Sass (.sass only) v1.8.26, Live Sass Compiler v6.0.5, Live Server v5.7.9,

Hola! Les pasaba a comentar si es que tengo bien los archivos, ya que me quedaron dos main.css en distintas carpetas.
Al parecer y por ahora funciona jaja pero no se si me complicará a lo largo del curso.

Esa extensión me va a estar salvando de estar abriendo la terminal a cada rato 🤯