Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class ="col">col</div>
<div class="col2">col2</div>
<div class = "col3">col3</div>
<div class = "col4">col4</div>

SassMeister-input.sass

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// Breakpoint (v2.4.6)
// Singularity.gs (v1.2.0.rc.6)
// ----


@import "singularitygs"

@import "breakpoint"
=clear
 clear: right

$grid:12
$gutters:1/3
.col,.col2,.col3,.col4
 border: 1px solid red
 height: 100px
 clear: right
 margin-bottom: 5px
 
.col
 +breakpoint(200px)
  +grid-span(3,1)
  color: red
 +breakpoint(500px)
  +grid-span(6,1)
  +clear
.col2
 +breakpoint(200px)
  +grid-span(3,4)
  color: blue
 +breakpoint(500px)
  +grid-span(6,7)
  +clear
.col3
 +breakpoint(200px)
  +grid-span(3,7)
 +breakpoint(500px)
  +grid-span(6,1)
  +clear
.col4
 +breakpoint(200px)
  +grid-span(3,10)
 +breakpoint(500px)
  +grid-span(6,7)
  +clear

SassMeister-output.css

.col, .col2, .col3, .col4 {
  border: 1px solid red;
  height: 100px;
  clear: right;
  margin-bottom: 5px;
}

@media (min-width: 200px) {
  .col {
    width: 23.72881%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
    color: red;
  }
}
@media (min-width: 500px) {
  .col {
    width: 49.15254%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
    clear: right;
  }
}

@media (min-width: 200px) {
  .col2 {
    width: 23.72881%;
    float: left;
    margin-right: -100%;
    margin-left: 25.42373%;
    clear: none;
    color: blue;
  }
}
@media (min-width: 500px) {
  .col2 {
    width: 49.15254%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    clear: right;
  }
}

@media (min-width: 200px) {
  .col3 {
    width: 23.72881%;
    float: left;
    margin-right: -100%;
    margin-left: 50.84746%;
    clear: none;
  }
}
@media (min-width: 500px) {
  .col3 {
    width: 49.15254%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
    clear: right;
  }
}

@media (min-width: 200px) {
  .col4 {
    width: 23.72881%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}
@media (min-width: 500px) {
  .col4 {
    width: 49.15254%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    clear: right;
  }
}

SassMeister-rendered.html

<div class ="col">col</div>
<div class="col2">col2</div>
<div class = "col3">col3</div>
<div class = "col4">col4</div>