Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generates margin and padding classes from SCSS to CSS based on 8px grid.
// Padding/Margin classes based on 8px grid with queries based on own breakpoints
$sides: (
"": "",
"t": "top",
"b": "bottom",
"l": "left",
"r": "right",
);
$breakpoints: (
"": "",
"mlg": $bp-mobile-lg,
"tlg": $bp-tablet-lg,
"lmd": $bp-laptop-md,
"dlg": $bp-desktop-lg,
);
@each $breakName, $breakValue in $breakpoints {
@each $sideName, $sideValue in $sides {
@for $i from 0 through 16 {
$property: if($sideName == '', '', -#{$sideValue});
$space: $i * 8;
$selector: '';
@if $breakName != "" {
$selector: #{$sideName}-#{$breakName}-#{$i};
} @else {
$selector: #{$sideName}-#{$i};
}
@if $breakName != "" {
@media (min-width: $breakValue) {
.m#{$selector} {
margin#{$property}: #{$space}px;
}
.p#{$selector} {
padding#{$property}: #{$space}px;
}
}
} @else {
.m#{$selector} {
margin#{$property}: #{$space}px;
}
.p#{$selector} {
padding#{$property}: #{$space}px;
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment