Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="main">
   <h1>Some Headline</h1>
  <section id="one">
   
    <div class="image">
      image  
    </div>
    <div class="copy">
        taha ist der beste
    </div>
    
    <section id="two">
   
    <div class="image">
      image  
    </div>
    <div class="copy">
        taha ist der beste
    </div>
  </section>

</div>

SassMeister-input.sass

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Singularity.gs (v1.5.1)
// ----

@import compass
@import singularitygs

+add-grid(1 5 5 2 3)
//+add-grid(snap(1 5 5 2 3))

+sgs-change("debug", true)

body
  +background-grid

#one
  +background-grid($color: grey)
  //+grid-span(3,2)
  +layout(1 5 5 2 3 )
    +grid-span(5, 1)

  .copy
    //+grid-span(2, 3)
    +grid-span(2, 3)
    background-color: orange
    
  .image
    height: 100px
    +grid-span(1, 2)
    //+grid-span(1,1)
    background-color: purple
    
  

SassMeister-output.css

body {
  background-image: linear-gradient(to right, chocolate 0%, chocolate 5.88235%, #dd8e56 5.88235%, #dd8e56 7.35294%, chocolate 7.35294%, chocolate 36.76471%, #dd8e56 36.76471%, #dd8e56 38.23529%, chocolate 38.23529%, chocolate 67.64706%, #dd8e56 67.64706%, #dd8e56 69.11765%, chocolate 69.11765%, chocolate 80.88235%, #dd8e56 80.88235%, #dd8e56 82.35294%, chocolate 82.35294%, chocolate);
}

#one {
  background-image: linear-gradient(to right, grey 0%, grey 5.88235%, #9f9f9f 5.88235%, #9f9f9f 7.35294%, grey 7.35294%, grey 36.76471%, #9f9f9f 36.76471%, #9f9f9f 38.23529%, grey 38.23529%, grey 67.64706%, #9f9f9f 67.64706%, #9f9f9f 69.11765%, grey 69.11765%, grey 80.88235%, #9f9f9f 80.88235%, #9f9f9f 82.35294%, grey 82.35294%, grey);
  -sgs-span-settings: ("span": 5, "location": 1, "grid": 1 5 5 2 3, "gutter": 0.25, "style": "opposite", "start row": true, "end row": true, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
  width: 100%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}
#one .copy {
  -sgs-span-settings: ("span": 2, "location": 3, "grid": 1 5 5 2 3, "gutter": 0.25, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
  width: 42.64706%;
  float: left;
  margin-right: -100%;
  margin-left: 38.23529%;
  clear: none;
  background-color: orange;
}
#one .image {
  height: 100px;
  -sgs-span-settings: ("span": 1, "location": 2, "grid": 1 5 5 2 3, "gutter": 0.25, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
  width: 29.41176%;
  float: left;
  margin-right: -100%;
  margin-left: 7.35294%;
  clear: none;
  background-color: purple;
}

SassMeister-rendered.html

<div class="main">
   <h1>Some Headline</h1>
  <section id="one">
   
    <div class="image">
      image  
    </div>
    <div class="copy">
        taha ist der beste
    </div>
    
    <section id="two">
   
    <div class="image">
      image  
    </div>
    <div class="copy">
        taha ist der beste
    </div>
  </section>

</div>