/** * Spacing * * creates margin and padding for each direction and for each breakpont * * */ $spacing-direction: ( 'top', 'bottom', 'left', 'right' ) !default; $spacing-gap: 0.25 !default; $spacing-steps: 10 !default; /** * mixin: spacing for single padding or margin * * */ @mixin spacing($class, $style, $direction, $name, $value) { .#{$class}-#{$direction}-#{$name} { #{$style}-#{$direction}: $value; } } /** * mixin: spacing for each breakpoint * * */ @mixin spacing_breakpoints($class, $style, $direction, $i, $value) { @include media-xs() { @include spacing($class, $style, $direction, 'xs-' + $i, $value); } @include media-sm() { @include spacing($class, $style, $direction, 'sm-' + $i, $value); } @include media-md() { @include spacing($class, $style, $direction, 'md-' + $i, $value); } @include media-lg() { @include spacing($class, $style, $direction, 'lg-' + $i, $value); } @include media-xlg() { @include spacing($class, $style, $direction, 'xlg-' + $i, $value); } } /** * * * */ .marginless { margin: 0; } .paddingless { padding: 0; } .m-last-child-0 { > *:last-child { margin: 0; } } .m-top-last-child-0 { > *:last-child { margin-top: 0; } } .m-bottom-last-child-0 { > *:last-child { margin-bottom: 0; } } @each $direction in $spacing-direction { @include spacing('m', 'margin', $direction, 0, 0); @include spacing('m', 'margin', $direction, 1, 1px); @for $i from 2 through $spacing-steps { $value: $spacing-gap * factor($i - 1) * 1rem; @include spacing('m', 'margin', $direction, $i, $value); @include spacing_breakpoints('m', 'margin', $direction, $i, $value); } } @each $direction in $spacing-direction { @include spacing('p', 'padding', $direction, 0, 0); @include spacing('p', 'padding', $direction, 1, 1px); @for $i from 0 through $spacing-steps { $value: $spacing-gap * factor($i - 1) * 1rem; @include spacing('p', 'padding', $direction, $i, $value); @include spacing_breakpoints('p', 'padding', $direction, $i, $value); } }