Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

// Extra small screen / phone
//** Deprecated `$screen-xs` as of v3.0.1
$screen-xs:                  480px !default;
//** Deprecated `$screen-xs-min` as of v3.2.0
$screen-xs-min:              $screen-xs !default;
//** Deprecated `$screen-phone` as of v3.0.1
$screen-phone:               $screen-xs-min !default;

// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;
//** Deprecated `$screen-tablet` as of v3.0.1
$screen-tablet:              $screen-sm-min !default;

// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;
//** Deprecated `$screen-desktop` as of v3.0.1
$screen-desktop:             $screen-md-min !default;

// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
$screen-lg:                  1200px !default;
$screen-lg-min:              $screen-lg !default;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
$screen-lg-desktop:          $screen-lg-min !default;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max:              ($screen-sm-min - 1) !default;
$screen-sm-max:              ($screen-md-min - 1) !default;
$screen-md-max:              ($screen-lg-min - 1) !default;

$xs-helper-padding-small: 1rem;
$sm-helper-padding-small: 1rem;
$md-helper-padding-small: 1rem;
$lg-helper-padding-small: 1rem;

$xs-helper-padding-medium: 2rem;
$sm-helper-padding-medium: 2rem;
$md-helper-padding-medium: 2rem;
$lg-helper-padding-medium: 2rem;

$xs-helper-padding-large: 3rem;
$sm-helper-padding-large: 3rem;
$md-helper-padding-large: 3rem;
$lg-helper-padding-large: 3rem;

$media-queries: (xs, max), (sm, min), (md, min), (lg, min);
$padding-sizes: small medium large;
$padding-directions: top right bottom left;

@each $mediaQueryKey, $mediaQueryDirection in $media-queries 
{

    @media(#{$mediaQueryDirection}-width: $screen-#{$mediaQueryKey}-#{$mediaQueryDirection})
    {

        @each $direction in $padding-directions 
        {
            @each $size in $padding-sizes 
            {
                .padding-#{$direction}-#{$size} {
                    padding-#{$direction}: #{$#{$mediaQueryKey}-helper-padding-#{$size}} !important;
                }
            }
        }

    }

}

SassMeister-output.css

Invalid CSS after "...$direction}: #{": expected expression (e.g. 1px, bold), was "$#{$mediaQueryK..."