Qué es Sass realmente
1
Sass no reemplaza CSS: lo potencia en fase de desarrollo para que puedas organizar mejor tus estilos.
2
Piensa en Sass como una capa de productividad: escribes menos repetición y obtienes un CSS final más consistente.
Sass
01
Introducción a Sass y flujo SCSS → CSS
Aprende qué aporta Sass sobre CSS, cómo compilar SCSS y cómo leer la salida CSS para mantener un código limpio y escalable.
Código del tema: Arquitectura Sass escalable
📘 Teoría
Del SCSS al CSS
1
El compilador transforma tus utilidades Sass en CSS normal. El output debe ser legible y estable.
2
Una buena práctica es revisar siempre qué selector final se genera tras el nesting.
SCSS de entrada
$brand: #4f46e5;
.button {
background: $brand;
&:hover {
background: #4338ca;
}
}🧪 Aprende probando
Ejemplo
SCSS → CSS: primer flujo Escribe SCSS en el panel izquierdo y genera el CSS en el derecho.
⌄
🏁 Retos
Reto
Reto: declara variable y úsala Define una variable $accent y aplícala al color de .badge.
⌄
Recursos del curso 14
Lección 02
Variables Sass y scope sin sorpresas