Generated by SassMeister.com, the Sass playground.

SassMeister-input.sass

// ---
// Compass (v0.13.alpha.4)
// Sass (v3.2.9)
// ---


=reset-body
  line-height: 1.2
+global-reset

SassMeister-input.scss

// ---
// Singularity.gs (v1.0.8)
// Sass (v3.2.9)
// ---


@import "breakpoint-slicer";

// _ ___ __ __ _ __ _____ ___ __________ ______ __

// / | / (_)___ / / / /_(_)___ ____ _____ _____ / /_ / __// | / __/ / / _/________ _____ ___ ___ _ ______ _____/ /__
// / |/ / / __ / __ \/ __/ / __ \/ __/ __ / __/ / _ \ __ \/ /| | __ \__ \ / /_ / / _ / __ \/ _ \ | /| / / __ \/ / ///
// / /| / / /_/ / / / / /_/ / / / / /_/ / /_/ / /_/ / / __/ __/ / __ |_/ /__/ / / / / / / /_/ / / / / / / __/ |/ |/ / /_/ / / / ,<

// /_/ |_/_/\, /_/ /_/__/_/_/ /_/__, /__, /__,_/_/___/ /____/_/ |_/____/____/ /_/ /_/ __,_/_/ /_/ /_/___/|__/|__/____/_/ /_/|_|

// /____/ /____//____/

//

// Copyright Nyx Digital 2013
// Version 1.0
//
// ** Global.scss **
// Use this file to configure your global styles and defaults, this should be included at the top of all of your page specific stylesheets.
//

//Leave this, this is required to import the framework itself, this must be the first line in this file.

//@import "Nightinggale/Nightinggale";

/* ==========================================================================
Base Settings
========================================================================== */

$legacy-support-for-ie6: true;
$legacy-support-for-ie7: true;

$smallest-screen: 400px;
$small-screen: 600px;
$large-screen: 800px;
$largest-screen: 1050px;

$slicer-breakpoints: $smallest-screen $small-screen $large-screen $largest-screen;
/*
0 400px 600px 800px 1050px
├───────────────────┼─────────┼─────────┼───────────┼─────────>
*/

/* ==========================================================================
Grid and Layout
========================================================================== */

$mobile-first: true;
$grids: 12;
$grids: add-grid(1 at bp(1));
$grids: add-grid(4 at bp(2));
$grids: add-grid(8 at bp(3));
$grids: add-grid(12 at bp(4));

$gutters: 1/3;
$gutters: add-gutter(.25 at $small-screen);

/* ==========================================================================
Colour Scheme
========================================================================== */

// Pick the base color for your scheme:
$cs-primary: #BE8E26;

// Select your scheme from the list and place it here:
$cs-scheme: analogic; // mono, complement, triad, tetrad, analogic, accented-analogic

// How distant do you want the hue offset to be:
$cs-hue-offset: 20;

// How distant do you want tints and shades to be from their base:
$cs-brightness-offset: 10%;

//Need to adjust them? Just redefine your colour schemes here.
//$primary : equalize(cs-primary());
//$secondary : lighten(cs-secondary(), 15%);
//$tertiary : darken(cs-tertiary(), 15%);
//$quadrary : cs-quadrary();

/* ==========================================================================
Typograthy
========================================================================== */

$font-size: 112.5;
$line-height: 1.65;

$body-copy-color: #444;
$heading-color: #222;

/* ==========================================================================
Author's custom styles
========================================================================== */

//@include animation-shake;

body {
//background: $primary;
//font-family: $font-family-sans;
margin: 1em;
//@include contrasted($primary);

#{headings()}{
/*    @include contrasted($primary); */
}
}

nav ul {
//background: $tertiary;
padding: 10px;
//@include contrasted($tertiary);
//@include border-radius(5px);

li {
    display: inline-block;
    margin: 0 10px 0 0;
    &:hover {
        /*@include animate(shake, .5s);*/
    }
}
}

section > article {

@include at(1) {
    @include grid-span(1, 1);
}

@include breakpoint($small-screen) {
    @include grid-span(2, 1);
}

@include breakpoint($large-screen) {
    @include grid-span(6, 1);
}

@include breakpoint($largest-screen) {
    @include grid-span(9, 1);
}
}

aside {

@include breakpoint($smallest-screen) {
    @include grid-span(1, 1);
}

@include breakpoint($small-screen) {
    @include grid-span(2, 3);
}

@include breakpoint($large-screen) {
    @include grid-span(2, 7);
}

@include breakpoint($largest-screen) {
    @include grid-span(3, 10);
}
}

footer {
@include isolation-span(12, 1, 'left');
}

SassMeister-output.css

@charset "UTF-8";
/* ==========================================================================
Base Settings
========================================================================== */
/*
0 400px 600px 800px 1050px
├───────────────────┼─────────┼─────────┼───────────┼─────────>
*/
/* ==========================================================================
Grid and Layout
========================================================================== */
/* ==========================================================================
Colour Scheme
========================================================================== */
/* ==========================================================================
Typograthy
========================================================================== */
/* ==========================================================================
Author's custom styles
========================================================================== */
body {
  margin: 1em;
}
body h1, body h2, body h3, body h4, body h5, body h6 {
  /*    @include contrasted($primary); */
}

nav ul {
  padding: 10px;
}
nav ul li {
  display: inline-block;
  margin: 0 10px 0 0;
}
nav ul li:hover {
  /*@include animate(shake, .5s);*/
}

@media (max-width: 600px) {
  section > article {
    width: 6.38298%;
    float: left;
    margin-right: -100%;
    margin-left: 0%;
    clear: none;
  }
}
@media (min-width: 600px) {
  section > article {
    width: 47.36842%;
    float: left;
    margin-right: -100%;
    margin-left: 0%;
    clear: none;
  }
}
@media (min-width: 800px) {
  section > article {
    width: 74.35897%;
    float: left;
    margin-right: -100%;
    margin-left: 0%;
    clear: none;
  }
}
@media (min-width: 1050px) {
  section > article {
    width: 74.57627%;
    float: left;
    margin-right: -100%;
    margin-left: 0%;
    clear: none;
  }
}

@media (min-width: 400px) {
  aside {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}
@media (min-width: 600px) {
  aside {
    width: 47.36842%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}
@media (min-width: 800px) {
  aside {
    width: 23.07692%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}
@media (min-width: 1050px) {
  aside {
    width: 23.72881%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}

footer {
  width: 100%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: left;
}