Last active
December 7, 2024 12:26
-
-
Save jacurtis/30da4bf9a6c9b9b5cc0aebac512ca7c9 to your computer and use it in GitHub Desktop.
SASS Margin and Padding Helpers Loop. Generates .m-t-10 type helper classes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
This .scss loop will create "margin helpers" and "padding helpers" for use in your web projects. | |
It will generate several classes such as: | |
.m-r-10 which gives margin-right 10 pixels. | |
.m-r-15 gives MARGIN to the RIGHT 15 pixels. | |
.m-t-15 gives MARGIN to the TOP 15 pixels and so on. | |
.p-b-5 gives PADDING to the BOTTOM of 5 pixels | |
.p-l-40 gives PADDING to the LEFT of 40 pixels | |
The first letter is "m" or "p" for MARGIN or PADDING | |
Second letter is "t", "b", "l", or "r" for TOP, BOTTOM, LEFT, or RIGHT | |
Third letter is the number of spacing in pixels. Adjust the amounts generated by editing the $spaceamounts variable below. | |
*/ | |
$spaceamounts: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100); // Adjust this to include the pixel amounts you need. | |
$sides: (top, bottom, left, right); // Leave this variable alone | |
@each $space in $spaceamounts { | |
@each $side in $sides { | |
.m-#{str-slice($side, 0, 1)}-#{$space} { | |
margin-#{$side}: #{$space}px !important; | |
} | |
.p-#{str-slice($side, 0, 1)}-#{$space} { | |
padding-#{$side}: #{$space}px !important; | |
} | |
} | |
} | |
/* | |
RUN GULP to generate the classes. Now you can use these helpers to customize spacing on HTML elements. | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
THIS IS THE GENERATED FILE THAT IS PRODUCED USING THE SIMPLE LOOP SHOWN ABOVE | |
*/ | |
.m-t-5 { | |
margin-top: 5px; } | |
.p-t-5 { | |
margin-top: 5px; } | |
.m-b-5 { | |
margin-bottom: 5px; } | |
.p-b-5 { | |
margin-bottom: 5px; } | |
.m-l-5 { | |
margin-left: 5px; } | |
.p-l-5 { | |
margin-left: 5px; } | |
.m-r-5 { | |
margin-right: 5px; } | |
.p-r-5 { | |
margin-right: 5px; } | |
.m-t-10 { | |
margin-top: 10px; } | |
.p-t-10 { | |
margin-top: 10px; } | |
.m-b-10 { | |
margin-bottom: 10px; } | |
.p-b-10 { | |
margin-bottom: 10px; } | |
.m-l-10 { | |
margin-left: 10px; } | |
.p-l-10 { | |
margin-left: 10px; } | |
.m-r-10 { | |
margin-right: 10px; } | |
.p-r-10 { | |
margin-right: 10px; } | |
.m-t-15 { | |
margin-top: 15px; } | |
.p-t-15 { | |
margin-top: 15px; } | |
.m-b-15 { | |
margin-bottom: 15px; } | |
.p-b-15 { | |
margin-bottom: 15px; } | |
.m-l-15 { | |
margin-left: 15px; } | |
.p-l-15 { | |
margin-left: 15px; } | |
.m-r-15 { | |
margin-right: 15px; } | |
.p-r-15 { | |
margin-right: 15px; } | |
.m-t-20 { | |
margin-top: 20px; } | |
.p-t-20 { | |
margin-top: 20px; } | |
.m-b-20 { | |
margin-bottom: 20px; } | |
.p-b-20 { | |
margin-bottom: 20px; } | |
.m-l-20 { | |
margin-left: 20px; } | |
.p-l-20 { | |
margin-left: 20px; } | |
.m-r-20 { | |
margin-right: 20px; } | |
.p-r-20 { | |
margin-right: 20px; } | |
.m-t-25 { | |
margin-top: 25px; } | |
.p-t-25 { | |
margin-top: 25px; } | |
.m-b-25 { | |
margin-bottom: 25px; } | |
.p-b-25 { | |
margin-bottom: 25px; } | |
.m-l-25 { | |
margin-left: 25px; } | |
.p-l-25 { | |
margin-left: 25px; } | |
.m-r-25 { | |
margin-right: 25px; } | |
.p-r-25 { | |
margin-right: 25px; } | |
.m-t-30 { | |
margin-top: 30px; } | |
.p-t-30 { | |
margin-top: 30px; } | |
.m-b-30 { | |
margin-bottom: 30px; } | |
.p-b-30 { | |
margin-bottom: 30px; } | |
.m-l-30 { | |
margin-left: 30px; } | |
.p-l-30 { | |
margin-left: 30px; } | |
.m-r-30 { | |
margin-right: 30px; } | |
.p-r-30 { | |
margin-right: 30px; } | |
.m-t-35 { | |
margin-top: 35px; } | |
.p-t-35 { | |
margin-top: 35px; } | |
.m-b-35 { | |
margin-bottom: 35px; } | |
.p-b-35 { | |
margin-bottom: 35px; } | |
.m-l-35 { | |
margin-left: 35px; } | |
.p-l-35 { | |
margin-left: 35px; } | |
.m-r-35 { | |
margin-right: 35px; } | |
.p-r-35 { | |
margin-right: 35px; } | |
.m-t-40 { | |
margin-top: 40px; } | |
.p-t-40 { | |
margin-top: 40px; } | |
.m-b-40 { | |
margin-bottom: 40px; } | |
.p-b-40 { | |
margin-bottom: 40px; } | |
.m-l-40 { | |
margin-left: 40px; } | |
.p-l-40 { | |
margin-left: 40px; } | |
.m-r-40 { | |
margin-right: 40px; } | |
.p-r-40 { | |
margin-right: 40px; } | |
.m-t-45 { | |
margin-top: 45px; } | |
.p-t-45 { | |
margin-top: 45px; } | |
.m-b-45 { | |
margin-bottom: 45px; } | |
.p-b-45 { | |
margin-bottom: 45px; } | |
.m-l-45 { | |
margin-left: 45px; } | |
.p-l-45 { | |
margin-left: 45px; } | |
.m-r-45 { | |
margin-right: 45px; } | |
.p-r-45 { | |
margin-right: 45px; } | |
.m-t-50 { | |
margin-top: 50px; } | |
.p-t-50 { | |
margin-top: 50px; } | |
.m-b-50 { | |
margin-bottom: 50px; } | |
.p-b-50 { | |
margin-bottom: 50px; } | |
.m-l-50 { | |
margin-left: 50px; } | |
.p-l-50 { | |
margin-left: 50px; } | |
.m-r-50 { | |
margin-right: 50px; } | |
.p-r-50 { | |
margin-right: 50px; } |
$spaceamounts: (2, 5, 8, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100);
$sides: (all, x, y, top, bottom, left, right);
@mixin make-space($prefix, $property) {
$property-prefix: #{str-slice($property, 0, 1)};
@each $space in $spaceamounts {
@each $side in $sides {
@if $side == 'all' {
.#{$prefix}-#{$property-prefix}-#{$space} {
#{$property}: #{$space}px !important;
}
} @else if $side == 'x' or $side == 'y' {
.#{$prefix}-#{$property-prefix}#{$side}-#{$space} {
@if $side == 'x' {
#{$property}-left: #{$space}px !important;
#{$property}-right: #{$space}px !important;
} @else {
#{$property}-top: #{$space}px !important;
#{$property}-bottom: #{$space}px !important;
}
}
} @else {
.#{$prefix}-#{$property-prefix}#{str-slice($side, 0, 1)}-#{$space} {
#{$property}-#{$side}: #{$space}px !important;
}
}
}
}
}
@media (min-width: 1px) {
@include make-space(xs, margin);
@include make-space(xs, padding);
}
@media (min-width: 768px) {
@include make-space(md, margin);
@include make-space(md, padding);
}
.m-t-5 {
margin-top: 5px; }
.p-t-5 {
margin-top: 5px; }
.m-b-5 {
margin-bottom: 5px; }
.p-b-5 {
margin-bottom: 5px; }
It's just margin in all css classes. even in padding class too
Just want to throw my solution in. This will take care of x / y axis and all sides. However it does not include breakpoints.
@use './variables'; <--- This would be your variable file or you can hard code values in $spacing-values below
$spacing-values: (
"25": variables.$spacing-25,
"50": variables.$spacing-50,
"75": variables.$spacing-75,
"100": variables.$spacing-100,
"200": variables.$spacing-200,
"300": variables.$spacing-300,
"400": variables.$spacing-400,
"500": variables.$spacing-500,
"600": variables.$spacing-600,
"700": variables.$spacing-700,
"800": variables.$spacing-800,
"900": variables.$spacing-900,
"1000": variables.$spacing-1000,
"1100": variables.$spacing-1100,
"1200": variables.$spacing-1200,
"1300": variables.$spacing-1300,
"1400": variables.$spacing-1400,
);
$spacing-modifiers: (
"ma": margin,
"mx": margin,
"my": margin,
"mt": margin-top,
"mr": margin-right,
"mb": margin-bottom,
"ml": margin-left,
"pa": padding,
"px": padding,
"py": padding,
"pt": padding-top,
"pr": padding-right,
"pb": padding-bottom,
"pl": padding-left,
);
@mixin create-spacing-classes($modifier, $value) {
@each $number, $val in $spacing-values {
@if ($modifier == "mx" or $modifier == "px") {
.#{$modifier}-#{$number} {
#{$value}: 0 $val;
}
} @else if ($modifier == "my" or $modifier == "py") {
.#{$modifier}-#{$number} {
#{$value}: $val 0;
}
} @else {
.#{$modifier}-#{$number} {
#{$value}: $val;
}
}
}
}
@each $modifier, $value in $spacing-modifiers {
@include create-spacing-classes($modifier, $value);
}
Just dropping this for anyone who gets here:
- it handles all sides
$spacings: (1,2,3,4,5,auto);
$sides: (
't': 'top',
'b': 'bottom',
'l': 'left',
'r': 'right',
'a': ('top', 'left', 'bottom', 'right'),
'x': ('left', 'right'),
'y': ('top', 'bottom'),
);
@each $space in $spacings {
@each $prefix, $positions in $sides {
.p#{$prefix}-#{$space} {
@each $pos in $positions {
padding-#{$pos}: if($space == auto, $space, #{$space * 0.25}rem);
}
}
.m#{$prefix}-#{$space} {
@each $pos in $positions {
margin-#{$pos}: if($space == auto, $space, #{$space * 0.25}rem);
}
}
}
}
A little optimization :
$spaceamounts: (0, 1, 2, 3, 4, 5, 6);
$sides: (top, bottom, left, right);
@each $space in $spaceamounts {
@each $side in $sides {
$parallel: if($side == top or $side == bottom, y, x);
$unity: if($space == 0, '', em !important);
.m#{str-slice($side, 0, 1)}-#{$space}, .m#{$parallel}-#{$space}, .m-#{$space} {
margin-#{$side}: #{$space}#{$unity};
}
.p#{str-slice($side, 0, 1)}-#{$space}, .p#{$parallel}-#{$space}, .p-#{$space} {
padding-#{$side}: #{$space}#{$unity};
}
}
}
$spacings: (1, 2, 3, 4, 5, auto);
$sides: (
"t": "top",
"b": "bottom",
"l": "left",
"r": "right",
"": (
"top",
"left",
"bottom",
"right"
),
"x": (
"left",
"right"
),
"y": (
"top",
"bottom"
)
);
$breakpoints: (
"": "",
"xs": 576px,
"sm": 768px,
"md": 992px,
"lg": 1200px,
"xl": 1400px
);
@each $breakName, $breakValue in $breakpoints {
@each $space in $spacings {
@each $prefix, $positions in $sides {
@if $breakName != "" {
$prefix: #{$prefix}-#{$breakName};
} @else {
$prefix: #{$prefix};
}
@if $breakName != "" {
@media (min-width: $breakValue) {
.p#{$prefix}-#{$space} {
@each $pos in $positions {
padding-#{$pos}: if($space == auto, $space, #{$space * 0.25}rem);
}
}
.m#{$prefix}-#{$space} {
@each $pos in $positions {
margin-#{$pos}: if($space == auto, $space, #{$space * 0.25}rem);
}
}
}
} @else {
.p#{$prefix}-#{$space} {
@each $pos in $positions {
padding-#{$pos}: if($space == auto, $space, #{$space * 0.25}rem);
}
}
.m#{$prefix}-#{$space} {
@each $pos in $positions {
margin-#{$pos}: if($space == auto, $space, #{$space * 0.25}rem);
}
}
}
}
}
}
awesome thanks, also for p-y- and m-y- m-x- p-x-
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is wonderful, thank you