Generated by SassMeister.com.

SassMeister-input-HTML.html

    <div class="box-cupon-home">
      <p>
        opa
      </p>
    </div><div class="box-cupon-home">
      <p>
        opa
      </p>
    </div><div class="box-cupon-home">
      <p>
        opa
      </p>
    </div><div class="box-cupon-home">
      <p>
        opa
      </p>
    </div><div class="box-cupon-home">
      <p>
        opa
      </p>
    </div><div class="box-cupon-home">
      <p>
        opa
      </p>
    </div><div class="box-cupon-home">
      <p>
        opa
      </p>
    </div><div class="box-cupon-home">
      <p>
        opa
      </p>
    </div><div class="box-cupon-home">
      <p>
        opa
      </p>
    </div><div class="box-cupon-home">
      <p>
        opa
      </p>
    </div>

SassMeister-input.sass

// ----
// Sass (v3.2.14)
// Compass (v0.12.3)
// Bourbon (v3.1.8)
// Neat (v1.5.0)
// ----

@import bourbon/bourbon
@import neat/neat

$mobile: new-breakpoint(max-width 480px 4)
$tablet: new-breakpoint(min-width 481px max-width 760px 6)
$desktop: new-breakpoint(min-width 761px max-width 960px 12)

.box-cupon-home
  background-color: #ccc
  margin-bottom: 10px
  +span-columns(4)
  +omega(3n)

  +media($desktop)
    background-color: blue
    &:before
      content: 'desktop'


  +media($tablet)
    +span-columns(3)
    +omega(2n)
    background-color: red
    &:before
      content: 'tablet'

  +media($mobile)
    +span-columns(4)
    background-color: green
    &:before
      content: 'mobile'

SassMeister-output.css

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.box-cupon-home {
  background-color: #cccccc;
  margin-bottom: 10px;
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 31.76157%;
}
.box-cupon-home:last-child {
  margin-right: 0;
}
.box-cupon-home:nth-child(3n) {
  margin-right: 0;
}
.box-cupon-home:nth-child(3n+1) {
  clear: left;
}
@media screen and (min-width: 761px) and (max-width: 960px) {
  .box-cupon-home {
    background-color: blue;
  }
  .box-cupon-home:before {
    content: "desktop";
  }
}
@media screen and (min-width: 481px) and (max-width: 760px) {
  .box-cupon-home {
    float: left;
    display: block;
    margin-right: 4.82916%;
    width: 47.58542%;
    background-color: red;
  }
  .box-cupon-home:last-child {
    margin-right: 0;
  }
  .box-cupon-home:nth-child(2n) {
    margin-right: 0;
  }
  .box-cupon-home:nth-child(2n+1) {
    clear: left;
  }
  .box-cupon-home:before {
    content: "tablet";
  }
}
@media screen and (max-width: 480px) {
  .box-cupon-home {
    float: left;
    display: block;
    margin-right: 7.42297%;
    width: 100%;
    background-color: green;
  }
  .box-cupon-home:last-child {
    margin-right: 0;
  }
  .box-cupon-home:before {
    content: "mobile";
  }
}

SassMeister-rendered.html

    <div class="box-cupon-home">
      <p>
        opa
      </p>
    </div><div class="box-cupon-home">
      <p>
        opa
      </p>
    </div><div class="box-cupon-home">
      <p>
        opa
      </p>
    </div><div class="box-cupon-home">
      <p>
        opa
      </p>
    </div><div class="box-cupon-home">
      <p>
        opa
      </p>
    </div><div class="box-cupon-home">
      <p>
        opa
      </p>
    </div><div class="box-cupon-home">
      <p>
        opa
      </p>
    </div><div class="box-cupon-home">
      <p>
        opa
      </p>
    </div><div class="box-cupon-home">
      <p>
        opa
      </p>
    </div><div class="box-cupon-home">
      <p>
        opa
      </p>
    </div>