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
Si ya tienes una cuenta,
Anatomía de un proyecto de SASS e instalación y configuración del entorno de trabajo
3/20Recursos
Aportes 26
Preguntas 14
Ordenar por:
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
.scssen 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:
- Crear una carpeta CSS (NO EDITABLE) y SCSS (EDITABLE)
- Dentro de la carpeta SCSS crear el archivo main.scss
- Obviamente, instalar las extensiones SASS de Syler y SASS Compiler de Glenn Marks
- Ir a Settings y buscar la edición del JSON de Live SASS Compiler (En el buscador poner: SASS Format)
- Configurar en la opción: “savePath”: “/css”,
- Ctrl + Shift + P y escribir Live SASS: Watch SASS
- 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.
he seguido la ruta y en este video hay muchas cosas nuevas que no se explicaron
3:08 de donde apareció esa consola y los comandos usados
5:30 que es un archivo json
6:20 que es un boilerplate
Todo iba bien hasta que apareció Live Sass compiler.
todo salio bien que bendicion aaah
Proceso de compilado:
1. Input file
2. Output file
3. Los comandos para ejecutar y compilar Sass
Luego de varios intentos me salió xd
No me estaba creando el archivo main.css.map a pesar de ejecutar "**Live Sass: Watch Sass**" correctamente. Mi solución fue escoger la opción "**Live Sass: Stop Watching**" y luego ejecutar otra vez "**Live Sass: Watch Sass**".
Amo como se ve el logo de Sass en el VSCode 😍😍
Este año 2025 el setting.json esta actualizado o viene diferente, no se cuando hubo el cambio, tuve que agregar la ruta "savePath": "/css", porque viene "savePath": null, y usar esta parte como comentarios // "savePathReplacementPairs": null
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css",
// "savePathReplacementPairs": null
}
Les dejo un resumen creado con Copilot para instalar e inicializar sass
buenas tardes, realice todo el procedimeinto, pero cuando hago clicl en Go Live, no me apareceel cambio del estilo en el Body, alguien me podria ayudar a ver por que no me aparece el cambio y tambien no se me crearon en automatico los archivos dentro de la carpeta CSS, me toco crearlos
<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 🤯
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?