Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

/**
 * Testing:
 *   - prepending optional selectors
 *   - css-wizardry-grids with all MQ
 */

$var: '';
@if false {
  $var: "html,"
}
  #{$var} body { debug: "true"; }
  
$empty: '';

$breakpoints: (
	'palm'       'screen and (max-width:  480px)',
	'lap-and-up' 'screen and (min-width:  481px)',
	'lap'        'screen and (min-width:  481px) and (max-width: 1023px)',
	'portrait'   'screen and (max-width:  768px)',
	'landscape'  'screen and (min-width:  769px)',
	'portable'   'screen and (max-width: 1023px)',
	'desk'       'screen and (min-width: 1024px)',
	'desk-wide'  'screen and (min-width: 1400px)',
	'all' 'all'
);

@mixin grid-media-query($media-query){
    $breakpoint-found: false;

    @each $breakpoint in $breakpoints{
        $name: nth($breakpoint, 1);
        $declaration: nth($breakpoint, 2);

        @if $media-query == $name and $declaration{
            $breakpoint-found: true;

            @media #{$declaration}{
                @content;
            }
        }
    }

    @if $breakpoint-found == false{
      //*Warning: Breakpoint ‘#{$media-query}’ does not exist */
        @warn "Breakpoint ‘#{$media-query}’ does not exist"
    }
}

$label-breakpoints:
( 'palm'     'lap-and-up'  'labels-beside--palm'
, 'portrait' 'landscape'   'labels-beside'
, 'all' null 'lb'
)!default;

@each $breakpoint in $label-breakpoints{
  $bp-narrow: nth($breakpoint, 1);
  $bp-wide: nth($breakpoint, 2);
  $c: nth($breakpoint, 3);

@debug "#{classname} between #{bp-narrow} and #{bp-wide}";

 /*Breakpoint: [#{$c}] [#{$bp-narrow}] [#{$bp-wide}] */
  .#{$c} {
    

    @include grid-media-query($bp-narrow) {
      labels: above;
    }
    @include grid-media-query($bp-wide) {
      labels:beside;
    }
  }
}

SassMeister-output.css

/**
 * Testing:
 *   - prepending optional selectors
 *   - css-wizardry-grids with all MQ
 */
body {
  debug: "true";
}

/*Breakpoint: [labels-beside--palm] [palm] [lap-and-up] */
@media screen and (max-width: 480px) {
  .labels-beside--palm {
    labels: above;
  }
}
@media screen and (min-width: 481px) {
  .labels-beside--palm {
    labels: beside;
  }
}

/*Breakpoint: [labels-beside] [portrait] [landscape] */
@media screen and (max-width: 768px) {
  .labels-beside {
    labels: above;
  }
}
@media screen and (min-width: 769px) {
  .labels-beside {
    labels: beside;
  }
}

/*Breakpoint: [lb] [all] [] */
@media all {
  .lb {
    labels: above;
  }
}