Usa Sass para escalar estilos con variables, anidamiento controlado y mixins reutilizables, escribiendo sintaxis Sass (SCSS) real en lugar de HTML.
Sass añade capacidades de diseño de sistema sobre CSS: variables, mixins y composición.
El anidamiento mejora lectura si lo limitas a pocos niveles.
Los mixins reducen duplicación en patrones repetidos como botones y breakpoints.
Compila siempre a CSS claro y revisable por el equipo.
Define colores, radios y espaciados como tokens Sass para mantener coherencia en todo el proyecto.
La convención habitual es declarar variables globales al inicio y agrupar por categoría.
Legibilidad sí, sobreanidación no.
Un mixin encapsula un patrón completo y evita copiar reglas en distintos componentes.
Úsalo cuando hay repetición real; evita envolver estilos triviales sin necesidad.
Usa Sass para escalar estilos con variables, anidamiento controlado y mixins reutilizables, escribiendo sintaxis Sass (SCSS) real en lugar de HTML.
Código del tema: display: grid; gap: 1rem;
Define colores, radios y espaciados como tokens Sass para mantener coherencia en todo el proyecto.
La convención habitual es declarar variables globales al inicio y agrupar por categoría.
$brand: #4f46e5;
$radius-md: 12px;
$space-3: 1rem;
.button {
background: $brand;
border-radius: $radius-md;
padding: $space-3;
}Legibilidad sí, sobreanidación no.
.card {
padding: 1rem;
&__title {
margin-bottom: 0.5rem;
}
&:hover {
transform: translateY(-2px);
}
}Un mixin encapsula un patrón completo y evita copiar reglas en distintos componentes.
Úsalo cuando hay repetición real; evita envolver estilos triviales sin necesidad.
@mixin button-base($bg, $fg: white) {
padding: 10px 16px;
border-radius: 10px;
border: 0;
background: $bg;
color: $fg;
font-weight: 600;
}
.btn-primary {
@include button-base(#4f46e5);
}