W dzisiejszym świecie css nie obejdzie się bez breakpointów do RWD. Praktycznie wszyscy używają scss a w takim razie możemy użyć mixin.
Najpierw tworzę listę breakpoints jako mapę, którą będziemy wykorzystywać w naszych stylach. Poniżej przykładowa lista, do własnych projektów użyj własnej listy.
$breakpoints: (
xs: 512px,
sm: 768px,
md: 896px,
lg: 1152px,
xl: 1280px
);Następna czynność to użycie mixin i expression. Użyłem w tym przykładzie min-width ale również można użyć max-width. Dokładnie chodzi o @media (min-width: 512px) {} lub @media (max-width: 512px) {} wybór należy już tylko od Ciebie.
@mixin breakpoint( $breakpoint ) {
@if map-has-key( $breakpoints, $breakpoint ) {
@media ( min-width: #{ map-get( $breakpoints, $breakpoint ) } ) {
@content;
}
} @else if type_of( $breakpoint ) == number and unit( $breakpoint ) == px or unit( $breakpoint ) == em or unit( $breakpoint ) == rem {
@media (min-width: $breakpoint ) {
@content;
}
} @else {
@warn "Nie można pobrać żadnej wartości z `#{$breakpoint}`. Nie jest zdefiniowany w mapie `$breakpoints` lub jest nieprawidłową liczbą px, em, lub rem.";
}
}