Generated by SassMeister.com.

SassMeister-input.scss

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

/// Map of breakpoints
/// @type Map
$breakpoints: (
  'small': '(min-width: 860px)',
  'medium': '(min-width: 1000px)',
  'large': '(min-width: 1140px)',
);

/// Helper mixin to create suffixed modifiers of a class
/// to make it effective starting certain breakpoints.
/// @param {String} $class - Class to “breakpointify”
@mixin breakpointify($class) {
  #{$class} { @content; }
  
  @each $name, $value in $breakpoints {
    @media #{$value} {
      #{$class}\@#{$name} { @content; }
    }
  }
}

// Demo
// `.u-inside` is a helper utility to add a basic padding
// More on that idea here:
// http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/
@include breakpointify('.u-inside') {
  padding: 1em;
}

SassMeister-output.css

.u-inside {
  padding: 1em;
}

@media (min-width: 860px) {
  .u-inside\@small {
    padding: 1em;
  }
}
@media (min-width: 1000px) {
  .u-inside\@medium {
    padding: 1em;
  }
}
@media (min-width: 1140px) {
  .u-inside\@large {
    padding: 1em;
  }
}