Generated by SassMeister.com.

SassMeister-input-HTML.html

<aside class="sidebar">
  <h3>Menu</h3>
</aside>
<div class="content" style="background-image: url(http://placekitten.com/1920/384);">
  <nav class="content-top">
    <h3>Leonadi</h3>
  </nav>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.3)
// Compass (v1.0.1)
// Susy (v2.1.3)
// ----

@import url(http://fonts.googleapis.com/css?family=Raleway:900,600,500,300,700,400,200,100,800);
@import "susy";

$susy: (
  columns: 12,
  gutter-position: inside,
  math: fluid,
  output: float
);

body {
  font-family: "Raleway";
}

.sidebar {
  min-height: 500px;
  background: #222;
  color: white;
  @include span(2);
}

.content {
  min-height: 500px;
  background: #eee;
  @include span(10);
  
  background-size: contain;
  background-repeat: no-repeat;
}

SassMeister-output.css

@import url(http://fonts.googleapis.com/css?family=Raleway:900,600,500,300,700,400,200,100,800);
body {
  font-family: "Raleway";
}

.sidebar {
  min-height: 500px;
  background: #222;
  color: white;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 16.66667%;
  float: left;
  padding-left: 0.83333%;
  padding-right: 0.83333%;
}

.content {
  min-height: 500px;
  background: #eee;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 83.33333%;
  float: left;
  padding-left: 0.83333%;
  padding-right: 0.83333%;
  background-size: contain;
  background-repeat: no-repeat;
}

SassMeister-rendered.html

<aside class="sidebar">
  <h3>Menu</h3>
</aside>
<div class="content" style="background-image: url(http://placekitten.com/1920/384);">
  <nav class="content-top">
    <h3>Leonadi</h3>
  </nav>
</div>