Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul class="icons">
  <li></li></li>
</ul>

SassMeister-input.scss

// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----

//////////// BASE STUFF

// base breakpoints map
$breakpoints: (
  'break-1': 26.250em,
  'break-2': 85.375em
);

@mixin breakpoint($name, $map: $breakpoints) {
  @if not map-has-key($map, $name) {
    @warn "Invalid breakpoint `#{$name}`.";
  }

  @else {
    @media (min-width: map-get($map, $name)) {
      @content;
    }
  }
}

//////////// BETA STUFF

// breakpoints specific to beta
$bp--beta: (
  '1-col': 16em,
);

.item {
  @include breakpoint('break-1') {
    color: blue;
  }
}


.item2 {
  @include breakpoint('1-col', $bp--beta) {
    df:sdf
  }
}

SassMeister-output.css

@media (min-width: 26.25em) {
  .item {
    color: blue;
  }
}

@media (min-width: 16em) {
  .item2 {
    df: sdf;
  }
}

SassMeister-rendered.html

<ul class="icons">
  <li></li></li>
</ul>