_breakpoints.scss

/**
 * Breakpoint Configuration
 * @see https://github.com/Team-Sass/breakpoint/wiki
 *
 */

/////////
// Singularity variables
//
@include breakpoint-set('to ems', true);

// Breakpoints variables
$main-menu-medium: 43em;
$xs: 15em;
$small: 25em;
$medium: 30em;
$large: 49.81em;
$xl: 63.19em;
$max-width: $xl;

/// Mixin - xs Breakpoint
/// Allows easier @include xs {} syntax
@mixin xs {
  @include breakpoint($xs) {
    @content;
  }
}

/// Mixin - small Breakpoint
/// Allows easier @include small {} syntax
@mixin small {
  @include breakpoint($small) {
    @content;
  }
}

/// Mixin - medium Breakpoint
/// Allows easier @include medium {} syntax
@mixin medium {
  @include breakpoint($medium) {
    @content;
  }
}

/// Mixin - large Breakpoint
/// Allows easier @include large {} syntax
@mixin large {
  @include breakpoint($large) {
    @content;
  }
}

/// Mixin - xl Breakpoint
/// Allows easier @include xl {} syntax
@mixin xl {
  @include breakpoint($xl) {
    @content;
  }
}

/// Mixin - max-width Breakpoint
/// Allows easier @include max-width {} syntax
@mixin max-width {
  @include breakpoint($max-width) {
    @content;
  }
}