Skip to content

Instantly share code, notes, and snippets.

@mllrjb
Created January 7, 2017 21:10
Show Gist options
  • Save mllrjb/cb8a2a52fb681ea20b42dac7db8bff35 to your computer and use it in GitHub Desktop.
Save mllrjb/cb8a2a52fb681ea20b42dac7db8bff35 to your computer and use it in GitHub Desktop.
Sass padding and margin utilities
/*
Spacing
- - - - - - - - - - - - - - - - - - - - - - - - -
Helper classes for spacing like margin and padding.
Class names follow this convention:
.[type][direction][size]
* type: `p` for `padding`, `m` for `margin`
* direction: `v` for vertical, `h` for horizontal, `t` for top, `l` for left etc.
* size: `+` for large, `++` for huge, `-` for small, `--` for tiny
Examples:
* `p++` will give you a huge (`++`) padding (`p`)
* `mb0` will give you zero margin (`m`) bottom (`b`)
* `mv+` will give you a large (`+`) vertical (`v`) margin (`m`)
You can also limit to which screen sizes padding or margin will be applied by prefixing breakpoint name, e.g. `small-mh0`,
`medium-mh`, `large-mh+`
*/
// generates all directional variants for the specified size (e.g. p, ph, pv, pt, pb, pl, pr)
@mixin generate-directions($class-prefix, $class-postfix, $property, $size) {
.#{$class-prefix}#{$class-postfix} { #{$property}: $size !important; }
.#{$class-prefix}h#{$class-postfix} { #{$property}-left: $size !important; #{$property}-right: $size !important;}
.#{$class-prefix}v#{$class-postfix} { #{$property}-top: $size !important; #{$property}-bottom: $size !important;}
.#{$class-prefix}t#{$class-postfix} { #{$property}-top: $size !important;}
.#{$class-prefix}b#{$class-postfix} { #{$property}-bottom: $size !important;}
.#{$class-prefix}l#{$class-postfix} { #{$property}-left: $size !important;}
.#{$class-prefix}r#{$class-postfix} { #{$property}-right: $size !important;}
}
// generates all sizes for the specified property
@mixin generate-spacing-classes($class-prefix, $padding, $margin) {
$padding-small: $padding / 2;
$padding-tiny: $padding / 4;
$padding-large: $padding * 1.5;
$padding-huge: $padding * 2;
@include generate-directions(#{$class-prefix}p, null, padding, $padding);
@include generate-directions(#{$class-prefix}p, \-, padding, ($padding-small));
@include generate-directions(#{$class-prefix}p, \-\-, padding, ($padding-tiny));
@include generate-directions(#{$class-prefix}p, \+, padding, ($padding-large));
@include generate-directions(#{$class-prefix}p, \+\+, padding, ($padding-huge));
@include generate-directions(#{$class-prefix}p, 0, padding, 0);
$margin-small: $margin / 2;
$margin-tiny: $margin / 4;
$margin-large: $margin * 1.5;
$margin-huge: $margin * 2;
@include generate-directions(#{$class-prefix}m, null, margin, $margin);
@include generate-directions(#{$class-prefix}m, \-, margin, ($margin-small));
@include generate-directions(#{$class-prefix}m, \-\-, margin, ($margin-tiny));
@include generate-directions(#{$class-prefix}m, \+, margin, ($margin-large));
@include generate-directions(#{$class-prefix}m, \+\+, margin, ($margin-huge));
@include generate-directions(#{$class-prefix}m, 0, margin, 0);
}
@include generate-spacing-classes(null, 20px, 20px);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment