Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="wrapper" >
  Hello
</div>

SassMeister-input.scss

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


$breakpoints: (
  small: "(max-width : 768px)",
  medium: "(min-width : 768px) and (max-width : 1024px)"
);

$breakpoint__smallest: "(max-width: 320px)";
$breakpoint__small: "";
$breakpoint__medium: "(min-width : 768px) and (max-width : 1024px)";

/// Mixin to manage responsive breakpoints
/// @author Hugo Giraudel
/// @param {String} $breakpoint - Breakpoint name
/// @require $breakpoints
@mixin respond-to($breakpoint) {
  // If the key exists in the map
  @if map-has-key($breakpoints, $breakpoint) {
    // Prints a media query based on the value
    @media #{map-get($breakpoints, $breakpoint)} {
      @content;
    }
  }
  // If the key doesn't exist in the map
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Available breakpoints are: #{map-keys($breakpoints)}.";
  }
}

$bp-length: length($breakpoints);
@for $i from 1 through $bp-length {
  $bp: nth($breakpoints, $i);
  @include respond-to(nth($bp, 1)) {
    $bp-name: nth($bp, 1);
    content: '#{$bp-name}';
  }
}

.wrapper {
  color: yellow;
  @include respond-to('small') {
    color: red;
    
    @include respond-to('medium') {
      color: blue;
    }
  }
}

SassMeister-output.css

@media (max-width: 768px) {
  content: "small";
}
@media (min-width: 768px) and (max-width: 1024px) {
  content: "medium";
}
.wrapper {
  color: yellow;
}
@media (max-width: 768px) {
  .wrapper {
    color: red;
  }
}
@media (max-width: 768px) and (min-width: 768px) and (max-width: 1024px) {
  .wrapper {
    color: blue;
  }
}

SassMeister-rendered.html

<div class="wrapper" >
  Hello
</div>