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.
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.
Código del tema: Arquitectura Sass escalable
📘 Teoría
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.
Botón con variante por parámetro
@mixin button-tone($tone) {
@if $tone == primary {
background: #2563eb;
color: #fff;
} @else if $tone == danger {
background: #dc2626;
color: #fff;
} @else {
background: #e2e8f0;
color: #0f172a;
}
}
.btn {
@include button-tone(primary);
padding: .625rem 1rem;
border-radius: 10px;
}