/sass-breakpoints

Mixin for responsive design.

Primary LanguageSCSS

Breakpoints

Import this file and build responsive structure easily.

  • 576px for phones.
  • 768px for tablets.
  • 992px for laptops.
  • 1200px for desktop.
$xs: 576px; // portrait phones
$sm: 768px; // tablets
$md: 992px; // laptops
$lg: 1200px; // desktops

@mixin tablet {
  @media (min-width: $sm) {
    @content;
  }
}

@mixin laptop {
  @media (min-width: $md) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: $lg) {
    @content;
  }
}