Generated by SassMeister.com.

SassMeister-input.scss

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

//
// Mixins
// --------------------------------------------------

// Generate Breakpoint Prefixes
// -------------------------
// this mixin adds breakpoint prefixes
// from the list of breakpoints to the
// beginning of a block of css selectors

// all of the breakpoint names and values
// we may use this a lot, keep them somwhere safe
$breakpoints: (
  xs: null,
  sm: 40rem,
  md: 52rem,
  lg: 64rem,
);

// returns the apropriate media query
// for the given breakpoint name
@mixin media-query($breakpoint) {
  @if (map-get($breakpoints, $breakpoint)) == null {
    @content;
  } @else {
    @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
      @content;
    }
  }
}

// nest content inside breakpoint prefix classes
// in the apropriate media query block
@mixin generate-breakpoint-prefixes {
 @each $breakpoint-name, $breakpoint-value in $breakpoints {
   $breakpoint-prefix: "#{$breakpoint-name}-";
   
   @include media-query($breakpoint-name) {
     
     // Columns
     .#{$breakpoint-prefix} {
       @content;
     }
   }
 }
}

// hide from humans not screen readers
@mixin visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px; margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

// include an svg icon as a background image using variables
@function svg-background($svg-variable) {
  @return url("data:image/svg+xml,#{$svg-variable}");
}


// Prefix
// -------------------------
// CSS vendor prefix mixin for desktops
// e.g. p {@include prefix((transform: translate(-50%, -50%)), webkit ms);}
// Credit: http://www.sitepoint.com/sass-mixins-kickstart-project/

@mixin prefix($map, $vendors: webkit moz ms o) {

  @each $prop, $value in $map {
    @if $vendors {

      @each $vendor in $vendors {
        #{"-" + $vendor + "-" + $prop}: #{$value};
      }

    }

    // Dump regular property anyway
    #{$prop}: #{$value};

  }
}


@include media-query(md) {
  .foo {
    background: blue;
  }
}

//nested
.baz {
  @include media-query(md) {
    .foo {
      background: blue;
    }
  }
}

SassMeister-output.css

@media (min-width: 52rem) {
  .foo {
    background: blue;
  }
}

@media (min-width: 52rem) {
  .baz .foo {
    background: blue;
  }
}