1 // Here we generate spacing utility classes for our sizes for all box sides and axis.
2 // These will output to classes like .px-m (Padding on x-axis, medium size) or .mr-l (Margin right, large size)
4 @mixin spacing($prop, $propLetter) {
5 @each $sizeLetter, $size in $spacing {
6 .#{$propLetter}-#{$sizeLetter} {
7 #{$prop}: $size !important;
9 .#{$propLetter}x-#{$sizeLetter} {
10 #{$prop}-inline-start: $size !important;
11 #{$prop}-inline-end: $size !important;
13 .#{$propLetter}y-#{$sizeLetter} {
14 #{$prop}-top: $size !important;
15 #{$prop}-bottom: $size !important;
17 .#{$propLetter}t-#{$sizeLetter} {
18 #{$prop}-top: $size !important;
20 .#{$propLetter}r-#{$sizeLetter} {
21 #{$prop}-inline-end: $size !important;
23 .#{$propLetter}b-#{$sizeLetter} {
24 #{$prop}-bottom: $size !important;
26 .#{$propLetter}l-#{$sizeLetter} {
27 #{$prop}-inline-start: $size !important;
31 @include spacing('margin', 'm');
32 @include spacing('padding', 'p');