#{$prop}: $size !important;
}
.#{$propLetter}x-#{$sizeLetter} {
- #{$prop}-left: $size !important;
- #{$prop}-right: $size !important;
+ #{$prop}-inline-start: $size !important;
+ #{$prop}-inline-end: $size !important;
}
.#{$propLetter}y-#{$sizeLetter} {
#{$prop}-top: $size !important;
#{$prop}-top: $size !important;
}
.#{$propLetter}r-#{$sizeLetter} {
- #{$prop}-right: $size !important;
+ #{$prop}-inline-end: $size !important;
}
.#{$propLetter}b-#{$sizeLetter} {
#{$prop}-bottom: $size !important;
}
.#{$propLetter}l-#{$sizeLetter} {
- #{$prop}-left: $size !important;
+ #{$prop}-inline-start: $size !important;
}
}
}
-@include spacing('margin', 'm')
-@include spacing('padding', 'p')
\ No newline at end of file
+@include spacing('margin', 'm');
+@include spacing('padding', 'p');
+
+@each $sizeLetter, $size in $spacing {
+ .gap-#{$sizeLetter} {
+ gap: $size !important;
+ }
+ .gap-x-#{$sizeLetter} {
+ column-gap: $size !important;
+ }
+ .gap-y-#{$sizeLetter} {
+ row-gap: $size !important;
+ }
+}