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.

Mis apuntes.

Para trabajar con SASS:

1. Crear una carpeta CSS (NO EDITABLE) y SCSS (EDITABLE)
2. Dentro de la carpeta SCSS crear el archivo main.scss
3. Obviamente, instalar las extensiones SASS de Syler y SASS Compiler de Glenn Marks
4. Ir a Settings y buscar la edición del JSON de Live SASS Compiler (En el buscador poner: SASS Format)
5. Configurar en la opción: “savePath”: “/css”,
6. Ctrl + Shift + P y escribir Live SASS: Watch SASS
7. Poner un fondo de cualquier color en el archivo main.scss

Creo que ahí está.

Las extensiones que se descargan son:

• Sass - Syler
• Live Sass Compiler - Glen Marks
• Liver Server - Ritwick Dey

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.

Todo iba bien hasta que apareció Live Sass compiler.

todo salio bien que bendicion aaah

<link rel=“preconnect” href=“https://fonts.googleapis.com”>
<link rel=“preconnect” href=“https://fonts.gstatic.com” crossorigin>
<link href=“https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&display=swap” rel=“stylesheet”>

$font-family: “IBM Plex Sans”, sans-serif;

<code> 

¿Cómo compilar mi código SASS?

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 🤯