{}
Aprende diseño y desarrollo web
Cursos gratuitos interactivos

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.

Las condicionales Sass permiten activar variantes de estilo en compilación, no en runtime del navegador.

@if es útil para themes, tamaños y modos de componente cuando la decisión es de build-time.

La lógica debe ser simple: muchas ramas suelen ser señal de arquitectura débil.

Piensa en reglas de sistema, no en ifs improvisados por componente.

  • Usa @if para resolver variaciones conocidas durante compilación: tono, tamaño, densidad o modo visual.
  • Si la decisión depende del usuario en tiempo real, eso corresponde a CSS/JS en runtime, no a Sass.
  • Puedes combinar mixins y @if para reducir duplicación manteniendo lectura clara.
  • Evita ramas largas; prioriza dos o tres opciones bien nombradas.
  • Las condicionales Sass permiten activar variantes de estilo en compilación, no en runtime del navegador.

Cuándo usar @if

Usa @if para resolver variaciones conocidas durante compilación: tono, tamaño, densidad o modo visual.

Si la decisión depende del usuario en tiempo real, eso corresponde a CSS/JS en runtime, no a Sass.

Mixin condicional limpio

Puedes combinar mixins y @if para reducir duplicación manteniendo lectura clara.

Evita ramas largas; prioriza dos o tres opciones bien nombradas.

Sass
10

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.

¿Cuánto sabes de Sass?

Código del tema: Arquitectura Sass escalable

📘 Teoría

Cuándo usar @if

1

Usa @if para resolver variaciones conocidas durante compilación: tono, tamaño, densidad o modo visual.

2

Si la decisión depende del usuario en tiempo real, eso corresponde a CSS/JS en runtime, no a Sass.

Mixin condicional limpio

1

Puedes combinar mixins y @if para reducir duplicación manteniendo lectura clara.

2

Evita ramas largas; prioriza dos o tres opciones bien nombradas.

🧪 Aprende probando

Ejemplo Ejemplo: badge condicional Genera estilo según un parámetro de estado.
⌄

🏁 Retos

Reto Reto: añade rama warning Amplía el mixin con @else if para warning.
⌄

🧰 Recursos

Enlaces útiles

Sass flow control Curso CSS Sass boolean values
Test

Comprueba tus conocimientos con un test sobre Sass.

Test de Sass
CodePen: card component pattern
Abrir en CodePen
Recursos del curso 14
🎬 Vídeos 🔗 Enlaces 🧩 Snippets
‹
Lección 09
Bucles Sass: @each, @for y @while con control
Lección 11
Breakpoints con mixins Sass para responsive sólido
›

¿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