SCSS Gist Example for Use in Jekyll

_example.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// Bitters (v0.10.0)
// Bourbon (v4.2.3)
// Fancy Buttons (v1.2.0)
// Neat (v1.6.0)
// Toolkit (v2.9.0)
// ----

/** Toolkit */
@import "toolkit";

/** Bourbon */
@import "bourbon/bourbon";

/** Neat */
@import "neat/neat";

/** Bitters */
@import "bitters/bitters";

/** BootStrap */
// @import "bootstrap";
/** Fancy Buttons */
@import "fancy-buttons";

/* Content Start */

$breakpoints: 480px, 600px, 840px, 960px, 1280px, 1600px !global;
$breakpoint-gutters: 16px, 16px, 24px, 24px, 24px, 24px !global;
$breakpoint-columns: 4, 8, 12, 12, 12, 12 !global;
$breakpoint-names: xs, sm, md, lg, xl, xx !global;

$bp-xs: nth($breakpoints, 1) !global;
$bp-sm: nth($breakpoints, 2) !global;
$bp-md: nth($breakpoints, 3) !global;
$bp-lg: nth($breakpoints, 4) !global;
$bp-xl: nth($breakpoints, 5) !global;
$bp-xx: nth($breakpoints, 6) !global;

// Define your breakpoints
$mq-xx: new-breakpoint(max-width nth($breakpoints, 6) nth($breakpoint-columns, 6)) !global;
$mq-xl: new-breakpoint(max-width nth($breakpoints, 5) nth($breakpoint-columns, 5)) !global;
$mq-lg: new-breakpoint(max-width nth($breakpoints, 4) nth($breakpoint-columns, 4)) !global;
$mq-md: new-breakpoint(max-width nth($breakpoints, 3) nth($breakpoint-columns, 3)) !global;
$mq-sm: new-breakpoint(max-width nth($breakpoints, 2) nth($breakpoint-columns, 2)) !global;
$mq-xs: new-breakpoint(max-width nth($breakpoints, 1) nth($breakpoint-columns, 1)) !global;

//$mobile: new-breakpoint(max-width 480px 4) !default;

$mobile: $mq-sm;

$mqs: $mq-xx $mq-xl $mq-lg $mq-md $mq-sm $mq-xs;