Skip to content

Instantly share code, notes, and snippets.

@certainlyakey certainlyakey/_mixins.scss
Last active Jun 11, 2019

Embed
What would you like to do?
A mixin that applies responsive spacing from a map
// A mixin that applies responsive spacing from a map
// Usage: @include u-set-spacing-style('page-spacing');
@mixin u-set-spacing-style($group-name) {
$group: map-get($spacing, $group-name);
@each $property, $value in $group {
$is-breakpoint: variable-exists('breakpoints') and map-has-key($breakpoints, $property) and type-of($value) == 'map';
@include u-set-breakpoint(if($is-breakpoint, $property, null)) {
@if ($is-breakpoint) {
$subproperties: $value;
@each $subproperty, $subvalue in $subproperties {
@include u-configure-spacing-style($subproperty, $subvalue);
}
} @else {
@include u-configure-spacing-style($property, $value);
}
}
}
}
@mixin u-configure-spacing-style($property, $value) {
$axis-positions: (
'x': left right,
'y': top bottom
);
@if (str-index($property, '-x') or str-index($property, '-y')) {
$axis: str-slice($property, str-length($property));
@if (type-of($value) == 'list') {
$positions: map-get($axis-positions, $axis);
@each $position in $positions {
$i: index($positions, $position);
#{str-slice($property, 1, -3)}-#{$position}: nth($value, $i);
}
} @else {
$positions: map-get($axis-positions, $axis);
@each $position in $positions {
#{str-slice($property, 1, -3)}-#{$position}: $value;
}
}
} @else {
#{$property}: $value;
}
}
@mixin u-set-breakpoint($breakpoint: null) {
@if ($breakpoint and variable-exists('breakpoints') and map-has-key($breakpoints, $breakpoint)) {
@media (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
} @else {
@content;
}
}
// First level lists spacing patterns, second and third list properties.
// Properties can be:
// 1. margin, padding (1-4 values, with traditional CSS order)
// 2. margin-x, margin-y, padding-x, padding-y (1-2 values, order is top-bottom/left-right)
// 3. [padding/margin]-[left/right/top/bottom] (1 value)
$spacing: (
'page-spacing': (
'margin-y': 20px,
'padding-y': 10px 40px,
'large': (
'padding-x': 40px 60px,
'margin-top': 100px
)
),
// 'card-spacing': ()
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.