bootstrap-responsive-spacing.scss

//
// Resposive spacer classes
// --------------------------------------------------

// Margin properties to cycle through
$margin-properties: (
    mt: margin-top,
    mb: margin-bottom,
    my: margin,
    ml: margin-left,
    mr: margin-right
);

$padding-properties: (
    pt: padding-top,
    pb: padding-bottom,
    py: padding,
    pl: padding-left,
    pr: padding-right
);

// Base number to multiply cycle length iterator
$base: 5;

// Cycle Length
$times: 60;

@each $name,
$number in $grid-breakpoints {
    @media (min-width: $number) {

        @each $prop-name,
        $prop-val in $margin-properties {
            @for $i from 0 through $times {
                $value: $i * $base + 0px;

                .#{$prop-name}-#{$name}-#{$i} {
                    @if $prop-name==my {
                        #{$prop-val}: $value 0px;
                    }

                    @else {
                        #{$prop-val}: $value;
                    }
                }
            }
        }

        @each $prop-name,
        $prop-val in $padding-properties {
            @for $i from 0 through $times {
                $value: $i * $base + 0px;

                .#{$prop-name}-#{$name}-#{$i} {
                    @if $prop-name==py {
                        #{$prop-val}: $value 0px;
                    }

                    @else {
                        #{$prop-val}: $value;
                    }
                }
            }
        }
    }
}