Breakpoints w Sass

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.";
  }
}

Ale jak tego używać, nic prostszego.

p {
 padding: 10px;
 @include breakpoint(xs) { 
   margin-top: 10px; 
 }
}

Co ostatecznie da nam po kompilacji.

p {
 padding: 10px;
 @media (min-width: 512px) { 
   margin-top: 10px; 
 }
}

W tym przykładzie jest możliwość użycia własnego breakpointa. Wystarczy przekazać do @include szerokości i jednostki. Tak jak poniżej.

p {
 padding: 10px;
 @include breakpoint(1600px) { 
   margin-top: 10px; 
 }
}