Generated by SassMeister.com.

SassMeister-input.scss

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

// WHAT I’M TRYING TO DO
//
// inuitcss has its RWD settings and tools split over a number of files. What I
// want to do is take an array of breakpoints, loop through them to create
// corresponding media queries, and then loop through those media queries in order
// to create a series of `.<breakpoint>-mb+ {}` style classes for responsively
// nudging margins about.
//
//
// THE PROBLEM
//
// It’s probably quite a valid error that I’m getting, but if you look at the
// `inuit-generate-responsive-variants()` mixin, I am looping through the
// breakpoints and defining `$alias` in that scope. The mixin uses a `@content`
// block, so I would expect that `$alias` would be in scope when called inside
// the mixin, like it is in the ‘Margin helper classes’ section. The problem is
// that it isn’t in scope, so I can’t prepend the classes with the current alias
// value in the loop.










///*------------------------------------*\
//    #RESPONSIVE-SETTINGS
//\*------------------------------------*/

// Define our breakpoints’ aliases and conditions.

$breakpoints: (
    "palm"          "screen and (max-width: 719px)",
    "lap"           "screen and (min-width: 720px) and (max-width: 1023px)",
    "lap-and-up"    "screen and (min-width: 720px)",
    "portable"      "screen and (max-width: 1023px)",
    "desk"          "screen and (min-width: 1024px)"
) !default;





///*------------------------------------*\
//    #RESPONSIVE-TOOLS
//\*------------------------------------*/

// Take breakpoints and create a media query mixin out of them.

@mixin media-query($mq) {

    // Loop through the list of breakpoints we’ve provided in our settings file.
    @each $breakpoint in $breakpoints {

        // Grab the alias and the condition from their respective locations in
        // the list.
        $alias:     nth($breakpoint, 1);
        $condition: nth($breakpoint, 2);

        // If the media query we’ve specified has an alias and a condition...
        @if $mq == $alias and $condition {

            // ...spit it out here.
            @media #{$condition} {
                @content;
            }

        }

    }

}





/*------------------------------------*\
    #SPACING
\*------------------------------------*/

// Default spacing unit.
$inuit-spacing: 10px !default;

// Create variants in one go.
@mixin inuit-generate-responsive-variants() {

    @each $breakpoint in $breakpoints {

        $alias:     nth($breakpoint, 1);
        $condition: nth($breakpoint, 2);
    
        @include media-query($alias) {
             @content;
        }

    }

}

/**
 * Margin helper classes.
 */

@include inuit-generate-responsive-variants() {
    .#{$alias}-m      { margin:           $inuit-spacing !important; }
    .#{$alias}-mt     { margin-top:       $inuit-spacing !important; }
    .#{$alias}-mr     { margin-right:     $inuit-spacing !important; }
    .#{$alias}-mb     { margin-bottom:    $inuit-spacing !important; }
    .#{$alias}-ml     { margin-left:      $inuit-spacing !important; }
    .#{$alias}-mh     { margin-right:     $inuit-spacing !important; margin-left:      $inuit-spacing !important; }
    .#{$alias}-mv     { margin-top:       $inuit-spacing !important; margin-bottom:    $inuit-spacing !important; }
}

/**
 * Padding helper classes.
 */

@include inuit-generate-responsive-variants() {
    .#{$alias}-p      { padding:           $inuit-spacing !important; }
    .#{$alias}-pt     { padding-top:       $inuit-spacing !important; }
    .#{$alias}-pr     { padding-right:     $inuit-spacing !important; }
    .#{$alias}-pb     { padding-bottom:    $inuit-spacing !important; }
    .#{$alias}-pl     { padding-left:      $inuit-spacing !important; }
    .#{$alias}-ph     { padding-right:     $inuit-spacing !important; padding-left:      $inuit-spacing !important; }
    .#{$alias}-pv     { padding-top:       $inuit-spacing !important; padding-bottom:    $inuit-spacing !important; }
}

SassMeister-output.css

Undefined variable: "$alias".