Cuando ejecuten el comando :
.
- Ctrl + Shift + P verifiquen que ejecutan “Live Sass: Watch Sass”
.
Conociendo SASS
¿Qué es SASS y en qué se diferencia de otros preprocesadores?
¿Cómo funcionan los preprocesadores? Ventajas de utilizar uno
Instalación y configuración del entorno de trabajo
Anatomía de un proyecto de SASS e instalación y configuración del entorno de trabajo
Reglas y uso
Estructura de la hoja de estilos y variables
Uso de selectores, scope de las variables y shadowing
Creando la estructura del proyecto
At Rules: CSS y nesting
Quiz: Reglas y uso
Expresiones
Expresiones: Literales y Operaciones
Quiz: Expresiones
Proyecto: sección main
Creando la estructura de la sección main
Quiz: Proyecto: sección main
Herencia en SASS
¿Qué es la herencia y cómo funciona en SASS?
Creando la estructura de la sección de Cuidado de la Salud y Decoración del Hogar
Usando flexbox en la sección de Cuidado de la Salud y Decoración del Hogar
Quiz: Herencia en SASS
Mixins
¿Qué es un mixin en CSS?
Implementando mixins en el proyecto
Quiz: Mixins
Funciones
Creación de nuestras propias funciones
Proyecto
Creando la estructura de la sección '¿Por qué nosotros?'
Creando la estructura de la sección Galería de Estilos
Creando la estructura de la sección Mapa y Footer
Quiz: Proyecto
Deploy
Presentación de Github pages y deploy
Quiz: Deploy
Extras
Aprende a instalar y configurar Sass mediante Node.js
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 15
Preguntas 11
Cuando ejecuten el comando :
.
.
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 🙌😀
.
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.
.
.scss
en el nombre del archivo.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 🤯
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.