Breakpoints

Usage

Default breakpoints


  $breakpoints: (
    xxs: 320px,
    xs: 480px,
    sm: 640px,
    md: 768px,
    lg: 960px,
    xl: 1180px,
    xxl: 1400px
  ) !default;

Media query mixin

@include breakpoint(xs) { ... }

Shorthand media query mixin

@include xxs { ... }
@include xs { ... }
@include sm { ... }
@include md { ... }
@include lg { ... }
@include xl { ... }
@include xxl { ... }

HTML class breakpoint suffixes

@xxs
@xs
@sm
@md
@lg
@xl
@xxl