Generated by SassMeister.com.

SassMeister-input-HTML.html

<div>1</div>
<div>2</div> 
<div>3</div> 
<div>4</div> 
<div>5</div> 
<div>6</div>
<div>7</div>
<div>8</div> 
<div>9</div> 
<div>10</div> 
<div>11</div> 
<div>12</div>

SassMeister-input.scss

// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// Breakpoint (v2.4.2)
// Singularity.gs (v1.2.1)
// ----

@import "singularitygs";
@import "breakpoint";
* {
  box-sizing: border-box;
}
$middle: 600px;
$pair-landscape: screen $middle, orientation landscape;
// Singularity 1.2 Syntax
@include add-grid(12);
@include add-gutter(20px);
@include add-gutter-style('split');

div {
  @include float-span(1);  
  border: 1px solid red;
  @include breakpoint($pair-landscape) {
    border-color: green;
  }
}

SassMeister-output.css

* {
  box-sizing: border-box;
}

div {
  width: 8.3333333333%;
  clear: right;
  float: left;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid red;
}
@media screen and (min-width: 600px), (orientation: landscape) {
  div {
    border-color: green;
  }
}

SassMeister-rendered.html

<div>1</div>
<div>2</div> 
<div>3</div> 
<div>4</div> 
<div>5</div> 
<div>6</div>
<div>7</div>
<div>8</div> 
<div>9</div> 
<div>10</div> 
<div>11</div> 
<div>12</div>

Thank you!