src/utilities/_spacing.scss
// =====================================================
// Spacing Utilities
// =====================================================
// -----------------------------------------------------
// Margin Utilities
// -----------------------------------------------------
$u-margin-prefix: "u-mg" !default;
$u-margin-variants: $theme-margin-variants;
@each $variant, $scale in $u-margin-variants {
.#{$u-margin-prefix}--#{$variant} {
margin: margin($scale);
}
}
@each $variant, $scale in $u-margin-variants {
.#{$u-margin-prefix}-top--#{$variant} {
margin-top: margin($scale);
}
}
@each $variant, $scale in $u-margin-variants {
.#{$u-margin-prefix}-right--#{$variant} {
margin-right: margin($scale);
}
}
@each $variant, $scale in $u-margin-variants {
.#{$u-margin-prefix}-bottom--#{$variant} {
margin-bottom: margin($scale);
}
}
@each $variant, $scale in $u-margin-variants {
.#{$u-margin-prefix}-left--#{$variant} {
margin-left: margin($scale);
}
}
// -----------------------------------------------------
// Padding Utilities
// -----------------------------------------------------
$u-padding-prefix: "u-pd" !default;
$u-padding-variants: $theme-padding-variants;
@each $variant, $scale in $u-padding-variants {
.#{$u-padding-prefix}--#{$variant} {
padding: margin($scale);
}
}
@each $variant, $scale in $u-padding-variants {
.#{$u-padding-prefix}-top--#{$variant} {
padding-top: margin($scale);
}
}
@each $variant, $scale in $u-padding-variants {
.#{$u-padding-prefix}-right--#{$variant} {
padding-right: margin($scale);
}
}
@each $variant, $scale in $u-padding-variants {
.#{$u-padding-prefix}-bottom--#{$variant} {
padding-bottom: margin($scale);
}
}
@each $variant, $scale in $u-padding-variants {
.#{$u-padding-prefix}-left--#{$variant} {
padding-left: margin($scale);
}
}