Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SCSS: utility classes for margin/padding
// whitespace
$whitespace: 1rem;
$whitespace-types: (
( 'short': p, 'long': padding ),
( 'short': m, 'long': margin )
);
$whitespace-directions: (
( 'name': t, 'prop': top ),
( 'name': b, 'prop': bottom ),
( 'name': l, 'prop': left ),
( 'name': r, 'prop': right )
);
@for $typeId from 1 through length($whitespace-types) {
$type: nth($whitespace-types, $typeId);
$short: map-get($type, 'short');
$long: map-get($type, 'long');
.#{$short}-half { #{$long}: $whitespace/2; }
@for $o from 1 through 5 {
.#{$short}-#{$o} { #{$long}: $whitespace * $o; }
}
@for $i from 1 through length($whitespace-directions) {
$direction: nth($whitespace-directions, $i);
$name: map-get($direction, 'name');
$prop: map-get($direction, 'prop');
$classPrefix: #{$short}#{$name};
$propPrefix: #{$long}-#{$prop};
.#{$classPrefix}-half { #{$propPrefix}: $whitespace/2; }
@for $o from 1 through 5 {
.#{$classPrefix}-#{$o} { #{$propPrefix}: $whitespace * $o; }
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment