Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="wrapper">
  <div class="row">
    <div class="span4 sidebar">Sidebar</div>
    <div class="span8">
      <div class="row">
        <div class="span12 content">
          <h1>Indhold</h1>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, earum, porro nihil nam illum dignissimos repudiandae accusantium veritatis dolore nobis iusto ad libero fuga provident excepturi unde corporis nulla necessitatibus.</div>
          <div>Tempora, dolorem, ipsa, odit consequuntur necessitatibus sint quisquam qui laudantium mollitia suscipit ad debitis quod officia beatae ipsam minus non incidunt obcaecati laboriosam quam ipsum quos eum molestiae expedita rerum!</div>
          <div>Aspernatur, quas, cum vel alias repellendus obcaecati sint voluptate aliquam? Sapiente, impedit ullam quas itaque quidem aliquid odio? Quibusdam ullam dolore expedita tempore explicabo itaque facere autem delectus aperiam voluptate.</div>
        </div>
      </div>
      <div class="row">
        <div class="span3">Kolonne nummer 1</div>
        <div class="span3">Kolonne nummer 2</div>
        <div class="span3">Kolonne nummer 3</div>
        <div class="span3">Kolonne nummer 4</div>
      </div>
    </div>
  </div>
</div>

SassMeister-input.sass

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Bourbon (v4.2.0)
// ----

@import bourbon/bourbon

.row
  width: 103%
  margin-left: -3%

.row:after, .row:before
  content: ""
  display: table
  clear: both

[class*="span"]
  margin: 0 0 0 3%
  float: left
  -moz-box-sizing: border-box
  box-sizing: border-box

/*
 *Spans
.span1
  width: 5.333%

.span2
  width: 13.666%

.span3
  width: 22%

.span4
  width: 30.333%

.span5
  width: 38.666%

.span6
  width: 47%

.span7
  width: 55.333%

.span8
  width: 63.666%

.span9
  width: 72%

.span10
  width: 80.333%

.span11
  width: 88.666%

.span12
  width: 97%

/*
 *Offsets
.offset1
  width: 11.333%

.offset2
  width: 19.666%

.offset3
  width: 28%

.offset4
  width: 36.333%

.offset5
  width: 44.666%

.offset6
  width: 53%

.offset7
  width: 61.333%

.offset8
  width: 69.666%

.offset9
  width: 78%

.offset10
  width: 86.333%

.offset11
  width: 94.666%
  
  
  
.wrapper
  width: 1000px
  padding: 0 20px
  margin: 0 auto

.sidebar
  background: #999
  min-height: 100vh
  
.content
  margin-bottom: 50px
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

SassMeister-output.css

.row {
  width: 103%;
  margin-left: -3%;
}

.row:after, .row:before {
  content: "";
  display: table;
  clear: both;
}

[class*="span"] {
  margin: 0 0 0 3%;
  float: left;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*Spans */
.span1 {
  width: 5.333%;
}

.span2 {
  width: 13.666%;
}

.span3 {
  width: 22%;
}

.span4 {
  width: 30.333%;
}

.span5 {
  width: 38.666%;
}

.span6 {
  width: 47%;
}

.span7 {
  width: 55.333%;
}

.span8 {
  width: 63.666%;
}

.span9 {
  width: 72%;
}

.span10 {
  width: 80.333%;
}

.span11 {
  width: 88.666%;
}

.span12 {
  width: 97%;
}

/*Offsets */
.offset1 {
  width: 11.333%;
}

.offset2 {
  width: 19.666%;
}

.offset3 {
  width: 28%;
}

.offset4 {
  width: 36.333%;
}

.offset5 {
  width: 44.666%;
}

.offset6 {
  width: 53%;
}

.offset7 {
  width: 61.333%;
}

.offset8 {
  width: 69.666%;
}

.offset9 {
  width: 78%;
}

.offset10 {
  width: 86.333%;
}

.offset11 {
  width: 94.666%;
}

.wrapper {
  width: 1000px;
  padding: 0 20px;
  margin: 0 auto;
}

.sidebar {
  background: #999;
  min-height: 100vh;
}

.content {
  margin-bottom: 50px;
}

SassMeister-rendered.html

<div class="wrapper">
  <div class="row">
    <div class="span4 sidebar">Sidebar</div>
    <div class="span8">
      <div class="row">
        <div class="span12 content">
          <h1>Indhold</h1>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, earum, porro nihil nam illum dignissimos repudiandae accusantium veritatis dolore nobis iusto ad libero fuga provident excepturi unde corporis nulla necessitatibus.</div>
          <div>Tempora, dolorem, ipsa, odit consequuntur necessitatibus sint quisquam qui laudantium mollitia suscipit ad debitis quod officia beatae ipsam minus non incidunt obcaecati laboriosam quam ipsum quos eum molestiae expedita rerum!</div>
          <div>Aspernatur, quas, cum vel alias repellendus obcaecati sint voluptate aliquam? Sapiente, impedit ullam quas itaque quidem aliquid odio? Quibusdam ullam dolore expedita tempore explicabo itaque facere autem delectus aperiam voluptate.</div>
        </div>
      </div>
      <div class="row">
        <div class="span3">Kolonne nummer 1</div>
        <div class="span3">Kolonne nummer 2</div>
        <div class="span3">Kolonne nummer 3</div>
        <div class="span3">Kolonne nummer 4</div>
      </div>
    </div>
  </div>
</div>