Generated by SassMeister.com.

SassMeister-input-HTML.html

<header>Header</header>
<nav>Navigation</nav>
<article>Article</article>
<footer>Footer</footer>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// Susy (v2.1.3)
// ----

@import "susy";

@include border-box-sizing;

$susy: (
  columns: 12,
  gutters: .25,
  column-width: 4em,
  gutter-position: inside-static,
  global-box-sizing: border-box,
);

// Layout
body {  }
header { @include span(25em) }
nav { }
article { }
footer { }


// Visuals
$pink: rgb(253, 0, 128);
html { background-color: #eee; }

header, nav, article, footer {
  padding-top: 1em;
  padding-bottom: 1em;
  font-family: monospace, serif;
  background: 
    linear-gradient(rgba($pink, .125), rgba($pink, .125)), rgba($pink, .25);
  background-clip: content-box, border-box;
  box-shadow: 0 0 0 1px rgba($pink, .25) inset;
}

SassMeister-output.css

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

header {
  width: 25em;
  float: left;
  padding-left: 0.5em;
  padding-right: 0.5em; }

html {
  background-color: #eee; }

header, nav, article, footer {
  padding-top: 1em;
  padding-bottom: 1em;
  font-family: monospace, serif;
  background: linear-gradient(rgba(253, 0, 128, 0.125), rgba(253, 0, 128, 0.125)), rgba(253, 0, 128, 0.25);
  background-clip: content-box, border-box;
  box-shadow: 0 0 0 1px rgba(253, 0, 128, 0.25) inset; }

SassMeister-rendered.html

<header>Header</header>
<nav>Navigation</nav>
<article>Article</article>
<footer>Footer</footer>