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.

Sass extiende CSS con variables, nesting, mixins y módulos para escribir estilos más mantenibles.

Tu código fuente será SCSS, pero el navegador siempre ejecuta CSS compilado.

Leer la salida CSS te ayuda a detectar sobreanidación y reglas duplicadas.

Este curso trabaja con dos paneles: SCSS (entrada) y CSS (resultado).

  • Sass no reemplaza CSS: lo potencia en fase de desarrollo para que puedas organizar mejor tus estilos.
  • Piensa en Sass como una capa de productividad: escribes menos repetición y obtienes un CSS final más consistente.
  • El compilador transforma tus utilidades Sass en CSS normal. El output debe ser legible y estable.
  • Una buena práctica es revisar siempre qué selector final se genera tras el nesting.
  • Sass extiende CSS con variables, nesting, mixins y módulos para escribir estilos más mantenibles.

Qué es Sass realmente

Sass no reemplaza CSS: lo potencia en fase de desarrollo para que puedas organizar mejor tus estilos.

Piensa en Sass como una capa de productividad: escribes menos repetición y obtienes un CSS final más consistente.

Del SCSS al CSS

El compilador transforma tus utilidades Sass en CSS normal. El output debe ser legible y estable.

Una buena práctica es revisar siempre qué selector final se genera tras el nesting.

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

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.

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.

🧪 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

Test

Comprueba tus conocimientos con un test sobre Sass.

Test de Sass
CodePen: variables y utilidades CSS
Abrir en CodePen

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com