Generated by SassMeister.com.

SassMeister-input-HTML.html

<div id="box1">test</div>

SassMeister-input.sass

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// Breakpoint (v2.5.0)
// Singularity.gs (v1.6.2)
// ----

@import 'singularitygs'
@import 'breakpoint'

+add-grid(1 3 5 3 1)
+sgs-change('debug', true)

body
  //+grid-span(2, 3)
  +background-grid($color: #DDD)


+breakpoint(900px)
  #box1
    +grid-span(2, 3)
    background-color: orange
    padding: gutter-span()

SassMeister-output.css

body {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220%25%22%20fill%3D%22%23DDD%22%20width%3D%227%2E14286%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%227%2E14286%25%22%20fill%3D%22%23e6e6e6%22%20width%3D%221%2E78571%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%228%2E92857%25%22%20fill%3D%22%23DDD%22%20width%3D%2221%2E42857%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2230%2E35714%25%22%20fill%3D%22%23e6e6e6%22%20width%3D%221%2E78571%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2232%2E14286%25%22%20fill%3D%22%23DDD%22%20width%3D%2235%2E71429%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2267%2E85714%25%22%20fill%3D%22%23e6e6e6%22%20width%3D%221%2E78571%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2269%2E64286%25%22%20fill%3D%22%23DDD%22%20width%3D%2221%2E42857%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2291%2E07143%25%22%20fill%3D%22%23e6e6e6%22%20width%3D%221%2E78571%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2292%2E85714%25%22%20fill%3D%22%23DDD%22%20width%3D%227%2E14286%25%22%20height%3D%22100%25%22%2F%3E%3C%2Fsvg%3E");
}

@media (min-width: 900px) {
  #box1 {
    -sgs-span-settings: ("span": 2, "location": 3, "grid": 1 3 5 3 1, "gutter": 0.25, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
    width: 58.92857%;
    float: left;
    margin-right: -100%;
    margin-left: 32.14286%;
    clear: none;
    background-color: orange;
    padding: 1.78571%;
  }
}

SassMeister-rendered.html

<div id="box1">test</div>