73 lines
2.0 KiB
SCSS
73 lines
2.0 KiB
SCSS
// Breakpoints matching typical Bootstrap breakpoints
|
|
$breakpoints: (
|
|
"sm": 576px,
|
|
"md": 768px,
|
|
"lg": 992px,
|
|
"xl": 1200px
|
|
);
|
|
|
|
// Spacer values (1 to 5) mapped to rem
|
|
$spacers: (
|
|
0: 0,
|
|
1: 0.25rem,
|
|
2: 0.5rem,
|
|
3: 1rem,
|
|
4: 1.5rem,
|
|
5: 3rem
|
|
);
|
|
|
|
@mixin generate-utilities($breakpoint: "") {
|
|
@each $size-key, $size-val in $spacers {
|
|
|
|
// Padding and Margin (all sides)
|
|
.p#{$breakpoint}-#{$size-key} { padding: $size-val !important; }
|
|
.m#{$breakpoint}-#{$size-key} { margin: $size-val !important; }
|
|
|
|
// Top
|
|
.pt#{$breakpoint}-#{$size-key} { padding-top: $size-val !important; }
|
|
.mt#{$breakpoint}-#{$size-key} { margin-top: $size-val !important; }
|
|
|
|
// Right / End
|
|
.pr#{$breakpoint}-#{$size-key} { padding-right: $size-val !important; }
|
|
.mr#{$breakpoint}-#{$size-key} { margin-right: $size-val !important; }
|
|
|
|
// Bottom
|
|
.pb#{$breakpoint}-#{$size-key} { padding-bottom: $size-val !important; }
|
|
.mb#{$breakpoint}-#{$size-key} { margin-bottom: $size-val !important; }
|
|
|
|
// Left / Start
|
|
.pl#{$breakpoint}-#{$size-key} { padding-left: $size-val !important; }
|
|
.ml#{$breakpoint}-#{$size-key} { margin-left: $size-val !important; }
|
|
|
|
// X-axis (left and right)
|
|
.px#{$breakpoint}-#{$size-key} {
|
|
padding-left: $size-val !important;
|
|
padding-right: $size-val !important;
|
|
}
|
|
.mx#{$breakpoint}-#{$size-key} {
|
|
margin-left: $size-val !important;
|
|
margin-right: $size-val !important;
|
|
}
|
|
|
|
// Y-axis (top and bottom)
|
|
.py#{$breakpoint}-#{$size-key} {
|
|
padding-top: $size-val !important;
|
|
padding-bottom: $size-val !important;
|
|
}
|
|
.my#{$breakpoint}-#{$size-key} {
|
|
margin-top: $size-val !important;
|
|
margin-bottom: $size-val !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 1. Generate default utilities (without breakpoint modifier)
|
|
@include generate-utilities("");
|
|
|
|
// 2. Generate utilities for each breakpoint using an @each loop
|
|
@each $bp-name, $bp-min-width in $breakpoints {
|
|
@media (min-width: $bp-min-width) {
|
|
@include generate-utilities("-#{$bp-name}");
|
|
}
|
|
}
|