Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.3.2)
// ----

$layout-breakpoints: (
  small: 480px,
  medium: 600px,
  large: 1024px,
  xlarge: 1300px,
  xxlarge: 1600px,
  xxxlarge: 1900px
);

@mixin respond($breakpoint, $type: 'from') {
  @if $type == 'from' {
    @media screen and (min-width: map-get($layout-breakpoints, $breakpoint)) {
      @content;
    }
  } @else if $type == 'to' {
    @media screen and (max-width: map-get($layout-breakpoints, $breakpoint)) {
      @content;
    }
  }
}

body {
  background: red;
  
  @include respond('small') {
    background: orange;
  }
  
  @include respond('medium') {
    background: green;
  }
  
  @include respond('large') {
    background: lightgreen;
  }
}

SassMeister-output.css

body {
  background: red;
}

@media screen and (min-width: 480px) {
  body {
    background: orange;
  }
}

@media screen and (min-width: 600px) {
  body {
    background: green;
  }
}

@media screen and (min-width: 1024px) {
  body {
    background: lightgreen;
  }
}