Centraliza breakpoints en Sass, crea mixins responsive y genera CSS adaptable sin repetir media queries por todo el proyecto.
Un mixin de breakpoint evita repetir media queries dispersas y mantiene consistencia de layout.
Definir breakpoints en un mapa te permite cambiar estrategia responsive desde un único punto.
Con @content puedes inyectar estilos contextuales en cada llamada del mixin.
La salida CSS sigue siendo estándar: Sass solo organiza la capa de autoría.
Evita hardcodear min-width en cada archivo. Centralizar breakpoints reduce incoherencias y facilita revisión de diseño responsive.
Un mapa de breakpoints y un mixin único suelen cubrir la mayoría de proyectos frontend.
@content permite pasar bloques de estilos al mixin para cada tamaño objetivo.
Este patrón mejora legibilidad frente a media queries sueltas en múltiples archivos.
Centraliza breakpoints en Sass, crea mixins responsive y genera CSS adaptable sin repetir media queries por todo el proyecto.
Código del tema: Arquitectura Sass escalable
Evita hardcodear min-width en cada archivo. Centralizar breakpoints reduce incoherencias y facilita revisión de diseño responsive.
Un mapa de breakpoints y un mixin único suelen cubrir la mayoría de proyectos frontend.
@content permite pasar bloques de estilos al mixin para cada tamaño objetivo.
Este patrón mejora legibilidad frente a media queries sueltas en múltiples archivos.
@use "sass:map";
$breakpoints: (
sm: 640px,
md: 768px,
lg: 1024px
);
@mixin mq($key) {
@media (min-width: map.get($breakpoints, $key)) {
@content;
}
}
.grid {
display: grid;
gap: 1rem;
@include mq(md) {
grid-template-columns: 1fr 1fr;
}
}