15. Breakpoints

Based on Breakpoint SASS

Uses get-bp custom scss function for media queries. Can be used with predefined breakpoint names in variables.scss or with a pixel value. Predefined values are based on Yesviz values. It has a mobile first approach so it generates min-width rule by default if only one param is used. If a second param is added it uses (min-width) and (max-width) accordingly.

Usage:

@include breakpoint( 1320px ) {
  $content
}

or

@include breakpoint( get-bp( $predifined-name ) ) {
  $content
}

or

@include breakpoint( get-bp( $predifined-name 0 ) ) {
  $content
}

Example 1:

@include breakpoint( 1320px ) {
  .my-rule { display: none; }
}

Output 1:

@media ( min-width: 1320px ) {
  .my-rule { display: none; }
}

Example 2:

@include breakpoint( get-bp('laptop-l') ) {
  .my-rule { display: none; }
}

Output 2:

@media ( min-width: 1320px ) {
  .my-rule { display: none; }
}

Example 3:

@include breakpoint( get-bp('laptop-l') 0 ) {
  .my-rule { display: none; }
}

Output 3:

@media ( min-width: 0px ) and ( max-width: 1320px ) {
  .my-rule { display: none; }
}