Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.3.6)
// ----

///* ========================================================================
//   #SETTINGS
//   ======================================================================== */


// Map of breakpoints
$breakpoints: (
  'small': '(min-width: 53rem)',
  'medium': '(min-width: 62rem)',
  'large': '(min-width: 71rem)',
);

///* ========================================================================
//   #RESPONSIVE MIXIN
//   ======================================================================== */

$responsive-exclude-default: null !default;


// Mixin to quickly generate different responsive selectors
// based upon the breakpoints defined in `breakpoints` map.
@mixin responsive($selector: null, $exclude: $responsive-exclude-default, $include: all) {

  @if ($exclude == null) {
    $exclude: $responsive-exclude-default
  }

  // Loop through our previously-defined breakpoints.
  @each $breakpoint, $mediaquery in $breakpoints {

    // Exclude breakpoints
    @if (index($exclude, $breakpoint) == null) {

      // Include breakpoints
      @if ($include == all or $include == null or index($include, $breakpoint)) {

        // If a selector is given base responsive selectors on it
        @if ($selector !=null) {

          // Build media-query based selector
          @media #{$mediaquery} {
            #{$selector}\@#{$breakpoint} {
              @content;
            }
          }
        }

        // If no selector is given
        @else {

          // Make breakpoint variable global to allow use in @content
          $breakpoint: $breakpoint !global;

          // Build media-query without selector
          @media #{$mediaquery} {
            @content;
          }

          // Take the global breakpoint variable back out of scope
          $breakpoint: null !global;
        }

      } // Close include check
    } // Close exclude check
  } // Close breakpoints loop
}


/* ==========================================================================
   #DEMOS
   ========================================================================== */


/* 1. Simple selector as argument
   ========================================================================== */
/**
 * One selector per media-query
 */
@include responsive('.u-inline') {
  display: inline !important;
}


/* 2. Simple selector as @content 
   ========================================================================== */
/**
 * One selector per media-query
 */
@include responsive() {
  .u-inline\@#{$breakpoint} {  
    display: inline !important;
  }
}


/* 3. Multiple selectors as @content
   ========================================================================== */
/**
 * Multiple selectors per media-query possible
 */
@include responsive() {
  .u-inline\@#{$breakpoint} {  
    display: inline !important;
  }
  .u-block\@#{$breakpoint} {  
    display:block !important;
  }
}


/* 4. Multiple selectors with pseudo element as @content
   ========================================================================== */
@include responsive() {
  .u-ratio-1\/2\@#{$breakpoint}:after {  
    padding-bottom: 50% !important;
  }
  .u-ratio-1\/4\@#{$breakpoint}:after {  
    padding-bottom: 25% !important;
  }
}


/* 5. Exclude breakpoint
   ========================================================================== */
/**
 * Exlude 'large' breakpoint 
 */
@include responsive($exclude: large) {
  .u-inline\@#{$breakpoint} {  
    display: inline !important;
  }
}


/* 6. Exclude multiple breakpoints
   ========================================================================== */
/**
 * Exlude 'large' and 'small' breakpoints 
 */
@include responsive($exclude: large small) {
  .u-inline\@#{$breakpoint} {  
    display: inline !important;
  }
}


/* 7. Include breakpoint
   ========================================================================== */
/**
 * Include 'large' breakpoint only
 */
@include responsive($include: large) {
  .u-inline\@#{$breakpoint} {  
    display: inline !important;
  }
}

SassMeister-output.css

/* ==========================================================================
   #DEMOS
   ========================================================================== */
/* 1. Simple selector as argument
   ========================================================================== */
/**
 * One selector per media-query
 */
@media (min-width: 53rem) {
  .u-inline\@small {
    display: inline !important;
  }
}

@media (min-width: 62rem) {
  .u-inline\@medium {
    display: inline !important;
  }
}

@media (min-width: 71rem) {
  .u-inline\@large {
    display: inline !important;
  }
}

/* 2. Simple selector as @content 
   ========================================================================== */
/**
 * One selector per media-query
 */
@media (min-width: 53rem) {
  .u-inline\@small {
    display: inline !important;
  }
}

@media (min-width: 62rem) {
  .u-inline\@medium {
    display: inline !important;
  }
}

@media (min-width: 71rem) {
  .u-inline\@large {
    display: inline !important;
  }
}

/* 3. Multiple selectors as @content
   ========================================================================== */
/**
 * Multiple selectors per media-query possible
 */
@media (min-width: 53rem) {
  .u-inline\@small {
    display: inline !important;
  }
  .u-block\@small {
    display: block !important;
  }
}

@media (min-width: 62rem) {
  .u-inline\@medium {
    display: inline !important;
  }
  .u-block\@medium {
    display: block !important;
  }
}

@media (min-width: 71rem) {
  .u-inline\@large {
    display: inline !important;
  }
  .u-block\@large {
    display: block !important;
  }
}

/* 4. Multiple selectors with pseudo element as @content
   ========================================================================== */
@media (min-width: 53rem) {
  .u-ratio-1\/2\@small:after {
    padding-bottom: 50% !important;
  }
  .u-ratio-1\/4\@small:after {
    padding-bottom: 25% !important;
  }
}

@media (min-width: 62rem) {
  .u-ratio-1\/2\@medium:after {
    padding-bottom: 50% !important;
  }
  .u-ratio-1\/4\@medium:after {
    padding-bottom: 25% !important;
  }
}

@media (min-width: 71rem) {
  .u-ratio-1\/2\@large:after {
    padding-bottom: 50% !important;
  }
  .u-ratio-1\/4\@large:after {
    padding-bottom: 25% !important;
  }
}

/* 5. Exclude breakpoint
   ========================================================================== */
/**
 * Exlude 'large' breakpoint 
 */
@media (min-width: 53rem) {
  .u-inline\@small {
    display: inline !important;
  }
}

@media (min-width: 62rem) {
  .u-inline\@medium {
    display: inline !important;
  }
}

/* 6. Exclude multiple breakpoints
   ========================================================================== */
/**
 * Exlude 'large' and 'small' breakpoints 
 */
@media (min-width: 62rem) {
  .u-inline\@medium {
    display: inline !important;
  }
}

/* 7. Include breakpoint
   ========================================================================== */
/**
 * Include 'large' breakpoint only
 */
@media (min-width: 71rem) {
  .u-inline\@large {
    display: inline !important;
  }
}