scss 间距便捷类

Posted 2021-05-17

// Spacing
// ------------------------------------

// Breakpoint-inclusive margin/padding convenience classes
// ex: .mt-4--large .py-2 .px-12--xlarge
@for $step from 0 through 20 {
    $spacing-amount: .75rem;

    @each $spacing-type in margin padding {
        $spacing-prefix: str-slice($spacing-type, 0, 1);

        @each $side in top bottom left right {
            $prefix: str-slice($side, 0, 1);

            .#{$spacing-prefix}#{$prefix}-#{$step} {
                #{$spacing-type}-#{$side}: #{$step} * $spacing-amount;
            }

            @each $bp in small medium large xlarge xxlarge {
                .#{$spacing-prefix}#{$prefix}-#{$step}--#{$bp} {
                    @include breakpoint($bp) {
                        #{$spacing-type}-#{$side}: #{$step} * $spacing-amount !important;
                    }
                }
            }
        }

        .#{$spacing-prefix}-#{$step} {
            #{$spacing-type}-top: #{$step} * $spacing-amount;
            #{$spacing-type}-bottom: #{$step} * $spacing-amount;
            #{$spacing-type}-left: #{$step} * $spacing-amount;
            #{$spacing-type}-right: #{$step} * $spacing-amount;
        }

        .#{$spacing-prefix}x-#{$step} {
            #{$spacing-type}-left: #{$step} * $spacing-amount;
            #{$spacing-type}-right: #{$step} * $spacing-amount;
        }

        .#{$spacing-prefix}y-#{$step} {
            #{$spacing-type}-top: #{$step} * $spacing-amount;
            #{$spacing-type}-bottom: #{$step} * $spacing-amount;
        }

        @each $bp in small medium large xlarge xxlarge {
            .#{$spacing-prefix}-#{$step}--#{$bp} {
                @include breakpoint($bp) {
                    #{$spacing-type}-top: (#{$step} * $spacing-amount) !important;
                    #{$spacing-type}-bottom: (#{$step} * $spacing-amount) !important;
                    #{$spacing-type}-left: (#{$step} * $spacing-amount) !important;
                    #{$spacing-type}-right: (#{$step} * $spacing-amount) !important;
                }
            }

            .#{$spacing-prefix}x-#{$step}--#{$bp} {
                @include breakpoint($bp) {
                    #{$spacing-type}-left: (#{$step} * $spacing-amount) !important;
                    #{$spacing-type}-right: (#{$step} * $spacing-amount) !important;
                }
            }

            .#{$spacing-prefix}y-#{$step}--#{$bp} {
                @include breakpoint($bp) {
                    #{$spacing-type}-top: (#{$step} * $spacing-amount) !important;
                    #{$spacing-type}-bottom: (#{$step} * $spacing-amount) !important;
                }
            }
        }
    }
}