Inicio

Curso de Sass

Preprocesado CSS profesional: SCSS, módulos, mixins y arquitectura escalable.

Tests

Pon a prueba tus conocimientos de Sass.

Lecciones

14
1
Básico
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.
2
Básico
Variables Sass y scope sin sorpresas
Domina variables en Sass, su alcance y cómo mantener tokens coherentes para compilar CSS limpio y predecible.
3
Medio
Nesting y selector padre (&) con criterio
Aprende a anidar en Sass sin generar CSS inflado, usando & para estados, variantes y estructura BEM limpia.
4
Medio
Mixins con parámetros para componentes reutilizables
Crea mixins flexibles, evita duplicación de reglas y genera CSS más mantenible para botones, cards y utilidades de layout.
5
Medio
@extend y placeholders (%) sin contaminar el CSS
Aprende a reutilizar reglas con placeholders y @extend, entendiendo cuándo conviene frente a mixins para evitar selectores inesperados.
6
Medio
Funciones y operadores Sass para escalar diseño
Usa funciones Sass para color, números y strings, y aplica operadores con criterio para generar CSS consistente.
7
Pro
Arquitectura con @use y @forward en Sass moderno
Organiza Sass por módulos, controla namespaces y construye una base escalable para proyectos grandes sin depender de @import legado.
8
Pro
Mapas Sass y design tokens reutilizables
Gestiona paletas, spacing y escalas con mapas Sass para construir un sistema de diseño coherente y fácil de evolucionar.
9
Pro
Bucles Sass: @each, @for y @while con control
Automatiza utilidades y variantes con bucles Sass sin sobreproducir clases innecesarias en el CSS final.
10
Pro
Condicionales Sass: @if, @else y lógica mantenible
Aplica lógica en Sass para variantes controladas sin duplicar reglas, manteniendo salida CSS clara y predecible.
11
Pro
Breakpoints con mixins Sass para responsive sólido
Centraliza breakpoints en Sass, crea mixins responsive y genera CSS adaptable sin repetir media queries por todo el proyecto.
12
Pro
Arquitectura Sass (7-1) y escalado profesional
Estructura proyectos Sass grandes con una arquitectura clara, separando base, componentes y utilidades para escalar sin caos.
13
Pro
Debug y migración de Sass heredado
Depura errores de compilación, reduce deuda técnica y migra de @import a módulos modernos sin romper estilos existentes.
14
Pro
Cierre del curso de Sass y siguiente ruta recomendada
Consolida lo aprendido en Sass, revisa checklist profesional y conecta con el curso de CSS para dominar la capa visual completa.
Página 1 de 1

¿Qué es esto?

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

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .