No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

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

3/20
Recursos

Aportes 20

Preguntas 12

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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 🙌😀

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.

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.

Las extensiones que se descargan son:

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

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… !!!

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.

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á.

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> 
me dice compilation Error Error: Undefined variable.

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 🤯