Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="main">
  <section id="one">
    <h1>Some Headline</h1>
    <div class="image">
      image  
    </div>
    <div class="copy">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    </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)
+sgs-change('debug', true)
body
  +background-grid()
  
#one
  +grid-span(3,2)


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

  
  
  
  

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 {
  -sgs-span-settings: ("span": 3, "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: 73.52941%;
  float: left;
  margin-right: -100%;
  margin-left: 7.35294%;
  clear: none;
}
#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;
}
#one .copy {
  background-color: orange;
}

SassMeister-rendered.html

<div class="main">
  <section id="one">
    <h1>Some Headline</h1>
    <div class="image">
      image  
    </div>
    <div class="copy">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    </div>
  </section>

</div>