Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="o-slider">
 <div class="o-slider__slide"></div>
 <div class="o-slider__slide"></div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

// These defaults can be overwritten in a variables file
$breakpoints: ( sm: 450px, md: 750px, lg: 1200px, xl: 1400px ) !default;

// media querys to loop over by default when using each-media mixin
$each-breakpoint: join(false, map-keys($breakpoints), 'comma') !default;

// character to get appended/prepended to the media query size when using `$media`
$media-helper: '\\@' !default; 

// if false it will turn into a suffix
$media-helper-prefix: true !default;

/// @name media
/// @description
/// Makes using media queries easier, and more consistant accross the site.
/// This should be used in conjuction with [css-mqpacker](https://www.npmjs.com/package/css-mqpacker)
/// for the best results.
/// @arg {string, number} $breakpoint - The breakpoint you're wanting to use
/// @arg {string} $type ['min-width'] - The type of query you're wanting to use
/// @markup {scss} Exampe:
/// .foo{
///   background: blue;
/// 
///   @include media(sm){
///     backround: blue;
///   }
/// 
///   @include media(567px){
///     background: purple;
///   }
/// }
/// 
/// @markup {scss} Exampe:
/// .bar{
///   background: blue;
/// 
///   @include media(sm){
///     margin: 10px;
///
///     @include media(md, 'max-width'){
///       background: purple;
///     }
///   }
/// }
@mixin media($breakpoint, $type: 'min-width') {
  $media: '' !global; // reset the media variable to be empty
  @if type-of($type) != 'string' {
    @error '$type must be a string, you passed a type of #{type-of($type)}'
  }

  $breakpoint-type: type-of($breakpoint);
  
  @if $breakpoint-type == 'bool' or ($breakpoint-type == 'string' and $breakpoint == '') {
    @content; // don't put it in a media query because it's a valid argument
  } @else if $breakpoint-type  == 'string' and map-has-key($breakpoints, $breakpoint) {
    // get the breakpoint size
    $breakpoint: map-get($breakpoints, $breakpoint);
    
    // update media variable to be the current defined viewport
    @if $media-helper-prefix {
      $media: '#{$media-helper}#{$breakpoint}' !global;  
    } @else {
      $media: '#{$breakpoint}#{$media-helper}' !global;
    }
  } 

  @if type-of($breakpoint) == 'number'{
    @media (#{$type}: $breakpoint) {
      @content
    }
  }
}

/// @name each-media
/// @description
/// Used to for helper classes that are used on different breakpoint sizes
///
/// @arg {string, list} $arg [$each-breakpoint] - The breakpoints to loop over, or one of the breakpoints to loop over
/// @arg {string} $rest... - a list of the rest of the breakpoints
/// @requires @mixin media
///
/// @markup {scss} Example: All the sizes
///   @include each-media{
///     @for $i from 1 through 12{
///       .col-#{$i}#{$media}{
///         width: percentage($i/12);
///       }
///     }
///   }
/// 
/// @markup {scss} Example: A few of the sizes
///   @include each-media(false, sm, md){
///     .u-text-center#{$media}{
///       text-align: center;
///     }
///   }
@mixin each-media($arg: $each-breakpoint, $rest...) {
  @if $rest != false {
    $arg: join($arg, $rest);
  }
  
  @each $breakpoint in $arg {
    @include media($breakpoint) {
      @content;
    }
  }
}




/*

  example of using the `media` mixin, and the $media variable 
  
*/
.foo{
  background: blue;

  @include media(sm){
    backround: blue;
  }

  @include media(567px){
    background: purple;
  }
}

.bar{
  background: blue;

  @include media(sm){
    margin: 10px;

    @include media(md, 'max-width'){
      background: purple;
    }
  }
}
/*

  example of using the each-media mixin, and the $media variable 
  
*/
@include each-media{
  @for $i from 1 through 12{
    .col-#{$i}#{$media}{
      width: percentage($i / 12);
    }
  }
}

SassMeister-output.css

/*

  example of using the `media` mixin, and the $media variable 
  
*/
.foo {
  background: blue;
}

@media (min-width: 450px) {
  .foo {
    backround: blue;
  }
}

@media (min-width: 567px) {
  .foo {
    background: purple;
  }
}

.bar {
  background: blue;
}

@media (min-width: 450px) {
  .bar {
    margin: 10px;
  }
}

@media (min-width: 450px) and (max-width: 750px) {
  .bar {
    background: purple;
  }
}

/*

  example of using the each-media mixin, and the $media variable 
  
*/
.col-1 {
  width: 8.33333%;
}

.col-2 {
  width: 16.66667%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.33333%;
}

.col-5 {
  width: 41.66667%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.33333%;
}

.col-8 {
  width: 66.66667%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.33333%;
}

.col-11 {
  width: 91.66667%;
}

.col-12 {
  width: 100%;
}

@media (min-width: 450px) {
  .col-1\@450px {
    width: 8.33333%;
  }
  .col-2\@450px {
    width: 16.66667%;
  }
  .col-3\@450px {
    width: 25%;
  }
  .col-4\@450px {
    width: 33.33333%;
  }
  .col-5\@450px {
    width: 41.66667%;
  }
  .col-6\@450px {
    width: 50%;
  }
  .col-7\@450px {
    width: 58.33333%;
  }
  .col-8\@450px {
    width: 66.66667%;
  }
  .col-9\@450px {
    width: 75%;
  }
  .col-10\@450px {
    width: 83.33333%;
  }
  .col-11\@450px {
    width: 91.66667%;
  }
  .col-12\@450px {
    width: 100%;
  }
}

@media (min-width: 750px) {
  .col-1\@750px {
    width: 8.33333%;
  }
  .col-2\@750px {
    width: 16.66667%;
  }
  .col-3\@750px {
    width: 25%;
  }
  .col-4\@750px {
    width: 33.33333%;
  }
  .col-5\@750px {
    width: 41.66667%;
  }
  .col-6\@750px {
    width: 50%;
  }
  .col-7\@750px {
    width: 58.33333%;
  }
  .col-8\@750px {
    width: 66.66667%;
  }
  .col-9\@750px {
    width: 75%;
  }
  .col-10\@750px {
    width: 83.33333%;
  }
  .col-11\@750px {
    width: 91.66667%;
  }
  .col-12\@750px {
    width: 100%;
  }
}

@media (min-width: 1200px) {
  .col-1\@1200px {
    width: 8.33333%;
  }
  .col-2\@1200px {
    width: 16.66667%;
  }
  .col-3\@1200px {
    width: 25%;
  }
  .col-4\@1200px {
    width: 33.33333%;
  }
  .col-5\@1200px {
    width: 41.66667%;
  }
  .col-6\@1200px {
    width: 50%;
  }
  .col-7\@1200px {
    width: 58.33333%;
  }
  .col-8\@1200px {
    width: 66.66667%;
  }
  .col-9\@1200px {
    width: 75%;
  }
  .col-10\@1200px {
    width: 83.33333%;
  }
  .col-11\@1200px {
    width: 91.66667%;
  }
  .col-12\@1200px {
    width: 100%;
  }
}

@media (min-width: 1400px) {
  .col-1\@1400px {
    width: 8.33333%;
  }
  .col-2\@1400px {
    width: 16.66667%;
  }
  .col-3\@1400px {
    width: 25%;
  }
  .col-4\@1400px {
    width: 33.33333%;
  }
  .col-5\@1400px {
    width: 41.66667%;
  }
  .col-6\@1400px {
    width: 50%;
  }
  .col-7\@1400px {
    width: 58.33333%;
  }
  .col-8\@1400px {
    width: 66.66667%;
  }
  .col-9\@1400px {
    width: 75%;
  }
  .col-10\@1400px {
    width: 83.33333%;
  }
  .col-11\@1400px {
    width: 91.66667%;
  }
  .col-12\@1400px {
    width: 100%;
  }
}

SassMeister-rendered.html

<div class="o-slider">
 <div class="o-slider__slide"></div>
 <div class="o-slider__slide"></div>
</div>