Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>hello world</h1>

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----



// Breakpoints
$bp-sm: 0 !default;
$bp-md-low: 550px !default;
$bp-md-high: 950px !default;
$bp-lg: 1100px !default;

@mixin breakpoint($breakpoint) {
  @if $breakpoint == "small" {
    @media (max-width: $bp-md-low - 1) {
      .#{$breakpoint} { color: white;}
      @content;
    }
  } @else if $breakpoint == "small-only" {
    @media (min-width: $bp-sm) and (max-width: $bp-md-low - 1) {
      .#{$breakpoint} { color: white;}
      @content;
    }
  } @else if $breakpoint == "medium-only" {
    @media (min-width: $bp-md-low) and (max-width: $bp-lg - 1) {
      .#{$breakpoint} { color: white;}
      @content;
    }
  } @else if $breakpoint == "medium" {
    @media (min-width: $bp-md-low) {
      .#{$breakpoint} { color: white;}
      @content;
    }
  } @else if $breakpoint == "medium-low-only" {
    @media (min-width: $bp-md-low) and (max-width: $bp-md-high - 1) {
      .#{$breakpoint} { color: white;}
      @content;
    }
  } @else if $breakpoint == "medium-high" {
    @media (min-width: $bp-md-high) {
      .#{$breakpoint} { color: white;}
      @content;
    }
  } @else if $breakpoint == "medium-high-only" {
    @media (min-width: $bp-md-high) and (max-width: $bp-lg - 1) {
      .#{$breakpoint} { color: white;}
      @content;
    }
  } @else if $breakpoint == "medium-and-lower" {
    @media (max-width: $bp-lg - 1) {
      .#{$breakpoint} { color: white;}
      @content;
    }
  } @else if $breakpoint == "large" {
    @media (min-width: $bp-lg) {
      .#{$breakpoint} { color: white;}
      @content;
    }
  } @else {
    @error 'No value could be retrieved for ' + $breakpoint;
  }
}
@include breakpoint(small) {
p { color: red;}
}
@include breakpoint(small-only) {
p { color: red;}
}
@include breakpoint(medium) {
p { color: red;}
}
@include breakpoint(medium-only) {
p { color: red;}
}
@include breakpoint(medium-low-only) {
p { color: red;}
}
@include breakpoint(medium-high) {
p { color: red;}
}
@include breakpoint(medium-high-only) {
p { color: red;}
}
@include breakpoint(medium-and-lower) {
p { color: red;}
}
@include breakpoint(large) {
p { color: red;}
}

SassMeister-output.css

@media (max-width: 549px) {
  .small {
    color: white;
  }

  p {
    color: red;
  }
}
@media (min-width: 0) and (max-width: 549px) {
  .small-only {
    color: white;
  }

  p {
    color: red;
  }
}
@media (min-width: 550px) {
  .medium {
    color: white;
  }

  p {
    color: red;
  }
}
@media (min-width: 550px) and (max-width: 1099px) {
  .medium-only {
    color: white;
  }

  p {
    color: red;
  }
}
@media (min-width: 550px) and (max-width: 949px) {
  .medium-low-only {
    color: white;
  }

  p {
    color: red;
  }
}
@media (min-width: 950px) {
  .medium-high {
    color: white;
  }

  p {
    color: red;
  }
}
@media (min-width: 950px) and (max-width: 1099px) {
  .medium-high-only {
    color: white;
  }

  p {
    color: red;
  }
}
@media (max-width: 1099px) {
  .medium-and-lower {
    color: white;
  }

  p {
    color: red;
  }
}
@media (min-width: 1100px) {
  .large {
    color: white;
  }

  p {
    color: red;
  }
}

SassMeister-rendered.html

<h1>hello world</h1>