Generated by SassMeister.com.

SassMeister-input-HTML.html

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

SassMeister-input.sass

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

@import singularitygs

+add-grid(12)
+sgs-change('debug', true)

body
  +background-grid($color: #DDD)

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

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%226%2E77966%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%226%2E77966%25%22%20fill%3D%22%23e6e6e6%22%20width%3D%221%2E69492%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%228%2E47458%25%22%20fill%3D%22%23DDD%22%20width%3D%226%2E77966%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2215%2E25424%25%22%20fill%3D%22%23e6e6e6%22%20width%3D%221%2E69492%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2216%2E94915%25%22%20fill%3D%22%23DDD%22%20width%3D%226%2E77966%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2223%2E72881%25%22%20fill%3D%22%23e6e6e6%22%20width%3D%221%2E69492%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2225%2E42373%25%22%20fill%3D%22%23DDD%22%20width%3D%226%2E77966%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2232%2E20339%25%22%20fill%3D%22%23e6e6e6%22%20width%3D%221%2E69492%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2233%2E89831%25%22%20fill%3D%22%23DDD%22%20width%3D%226%2E77966%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2240%2E67797%25%22%20fill%3D%22%23e6e6e6%22%20width%3D%221%2E69492%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2242%2E37288%25%22%20fill%3D%22%23DDD%22%20width%3D%226%2E77966%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2249%2E15254%25%22%20fill%3D%22%23e6e6e6%22%20width%3D%221%2E69492%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2250%2E84746%25%22%20fill%3D%22%23DDD%22%20width%3D%226%2E77966%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2257%2E62712%25%22%20fill%3D%22%23e6e6e6%22%20width%3D%221%2E69492%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2259%2E32203%25%22%20fill%3D%22%23DDD%22%20width%3D%226%2E77966%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2266%2E10169%25%22%20fill%3D%22%23e6e6e6%22%20width%3D%221%2E69492%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2267%2E79661%25%22%20fill%3D%22%23DDD%22%20width%3D%226%2E77966%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2274%2E57627%25%22%20fill%3D%22%23e6e6e6%22%20width%3D%221%2E69492%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2276%2E27119%25%22%20fill%3D%22%23DDD%22%20width%3D%226%2E77966%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2283%2E05085%25%22%20fill%3D%22%23e6e6e6%22%20width%3D%221%2E69492%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2284%2E74576%25%22%20fill%3D%22%23DDD%22%20width%3D%226%2E77966%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2291%2E52542%25%22%20fill%3D%22%23e6e6e6%22%20width%3D%221%2E69492%25%22%20height%3D%22100%25%22%2F%3E%3Crect%20x%3D%2293%2E22034%25%22%20fill%3D%22%23DDD%22%20width%3D%226%2E77966%25%22%20height%3D%22100%25%22%2F%3E%3C%2Fsvg%3E");
}

#box1 {
  background-color: orange;
  -sgs-span-settings: ("span": 2, "location": 3, "grid": 12, "gutter": 0.25, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
  width: 15.25424%;
  float: left;
  margin-right: -100%;
  margin-left: 16.94915%;
  clear: none;
  padding: 20px;
}

SassMeister-rendered.html

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