Generated by SassMeister.com.

SassMeister-input-HTML.html

<header>
  <span class="logo">Gizmosan</span>
  <nav class="site-nav">
      <a href="#">TVs</a>
      <a href="#">Tablets</a>
      <a href="#">PCs</a>
      <form>
      <input type="search" results=5 placeholder="search..." />
      <button>Search</button>
      </form>
  </nav>
  <nav class="user-nav">
    <a href="#">Hello John!</a>
    <a href="#">Cart (2)</a>
  </nav>
</header>
<div class="content">
<aside>
  <button>Buy</button>
  <nav></nav>
</aside>
<section class="carousel">
  <div class="banner"><h1>Samsung 50" LCD TV</h1></div>
</section>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// Susy (v2.1.1)
// ----

@import "compass";
//@import "compass/reset";
@import "susy";

// Vertical Rhythm
$base-font-size: 16px;
$base-line-height: 24px;
$round-to-nearest-half-line: true;
@include establish-baseline;

$header-height: 30px;

$susy: (
  columns: 12,
  gutters: 1/4,
);

body { 
  @include container();
  margin: 0px;
}
header {
  @include span(100%);
  //font-size: 1.5em;
  @include adjust-font-size-to(20px);
  height: $header-height;
  //vertical-align: text-bottom;
  background-color: #ccc;
  
  .logo { @include span(2 of 12); }
  .site-nav {
    display: inline;
    //float: left;
    * { display: inline; }
    form {
      display: inline;
      position: relative;
    }
    form * { 
      position: relative;
      outline: 0;
      margin-top: -($header-height - 19) / 2;
      margin-bottom: ($header-height - 19) / 2;
    }
    a { margin-right: gutter(); }
    //input { display: inline; }
  }
  .user-nav {
    @include span(last 3 of 12);
    text-align: right;
    a { 
      width: span(1);
      margin-left: gutter();
      }
  }
}

/// Content
.content {
  @include container(100%);
  position: relative;
  top: $header-height;
}
aside {
  position: absolute;
  width: span(3);
  top: rhythm(1);
  right: gutter();
  border: 1px solid black;
}
section {
  //@include span(9 of 12);
  padding-top: rhythm(1);
  padding-right: span(3) + gutter();
}
.carousel {
  padding-top: 0px;
  width: 100%;
  .banner { 
    @include opacity(.6);
    background-color: #000;
    h1 { 
      color: #fff;
    }
  }
}

SassMeister-output.css

html {
  font-size: 100%;
  line-height: 1.5em;
}

body {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin: 0px;
}
body::after {
  content: " ";
  display: block;
  clear: both;
}

header {
  width: 100%;
  float: left;
  margin-right: 1.69492%;
  font-size: 1.25em;
  line-height: 1.2em;
  height: 30px;
  background-color: #ccc;
}
header .logo {
  width: 15.25424%;
  float: left;
  margin-right: 1.69492%;
}
header .site-nav {
  display: inline;
}
header .site-nav * {
  display: inline;
}
header .site-nav form {
  display: inline;
  position: relative;
}
header .site-nav form * {
  position: relative;
  outline: 0;
  margin-top: -5.5px;
  margin-bottom: 5.5px;
}
header .site-nav a {
  margin-right: 1.69492%;
}
header .user-nav {
  width: 23.72881%;
  float: right;
  text-align: right;
}
header .user-nav a {
  width: 6.77966%;
  margin-left: 1.69492%;
}

.content {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 30px;
}
.content::after {
  content: " ";
  display: block;
  clear: both;
}

aside {
  position: absolute;
  width: 23.72881%;
  top: 1.5em;
  right: 1.69492%;
  border: 1px solid black;
}

section {
  padding-top: 1.5em;
  padding-right: 25.42373%;
}

.carousel {
  padding-top: 0px;
  width: 100%;
}
.carousel .banner {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
  opacity: 0.6;
  background-color: #000;
}
.carousel .banner h1 {
  color: #fff;
}

SassMeister-rendered.html

<header>
  <span class="logo">Gizmosan</span>
  <nav class="site-nav">
      <a href="#">TVs</a>
      <a href="#">Tablets</a>
      <a href="#">PCs</a>
      <form>
      <input type="search" results=5 placeholder="search..." />
      <button>Search</button>
      </form>
  </nav>
  <nav class="user-nav">
    <a href="#">Hello John!</a>
    <a href="#">Cart (2)</a>
  </nav>
</header>
<div class="content">
<aside>
  <button>Buy</button>
  <nav></nav>
</aside>
<section class="carousel">
  <div class="banner"><h1>Samsung 50" LCD TV</h1></div>
</section>
</div>