Generated by SassMeister.com.

SassMeister-input-HTML.haml

.button
  Click
.button--error
  Error
.button--success
  Success
.button--pending
  Pending

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// ----

//Easy Breakpoint management
@import "breakpoint";

$small: min-width 200px;
$medium: min-width 500px;
$large: min-width 1024px;


.button {
  height: 50px;
  width: 100%;
  @include breakpoint($small) {
    width: 50%;
  }
  
  @include breakpoint($medium) {
    color: red;
  }
  
  @include breakpoint($large) {
    color: gold;
  }
    
}

SassMeister-output.css

.button {
  height: 50px;
  width: 100%;
}
@media (min-width: 200px) {
  .button {
    width: 50%;
  }
}
@media (min-width: 500px) {
  .button {
    color: red;
  }
}
@media (min-width: 1024px) {
  .button {
    color: gold;
  }
}

SassMeister-rendered.html

.button
  Click
.button--error
  Error
.button--success
  Success
.button--pending
  Pending