Skip to content

Instantly share code, notes, and snippets.

@evanre
Last active March 13, 2018 09:53
Show Gist options
  • Save evanre/6a58d8d39c47901f80a0da7777e1e8d5 to your computer and use it in GitHub Desktop.
Save evanre/6a58d8d39c47901f80a0da7777e1e8d5 to your computer and use it in GitHub Desktop.
Flexbox mixin
/* Flex mixin */
// Map of all flexbox container properties
$flex-config: (
flex-direction: (row, row-reverse, column, column-reverse),
flex-wrap: (nowrap, wrap, wrap-reverse),
justify-content: (flex-start, flex-end, center, space-between, space-around),
align-items: (stretch, flex-start, flex-end, center, baseline),
align-content: (stretch, flex-start, flex-end, center, space-between, space-around)
);
// Default flex extender, apply everywhere
%flex {display: flex;}
// Generate flex extenders for each property
@each $prop, $values in $flex-config {
@each $value in $values {
%#{$prop}-#{$value} {
#{$prop}: #{$value};
}
}
};
// Create a flex mixin
// max 5 property values
// in such direction: flex-direction, flex-wrap, justify-content, align-items, align-content
// ... or null
// example: @include flex(column, null, space-around, flex-end);
@mixin flex($props...) {
@if( 5 < length($props) ) {
@error 'Max 5 values!';
}
@extend %flex;
@if length($props) > 0 {
@for $i from 1 through length($props) {
$val: nth($props, $i); // Get current value
@if( null != $val ) {
$prop: nth(map-keys($flex-config), $i); // Get current property name
@if ( null != index(map-get($flex-config, $prop), $val) ) { // Search for value in property list
@extend %#{$prop}-#{$val}; // Extend this value
} @else {
@error 'No such property #{$prop}: #{$val}; in \'flex\' mixin, property ##{$i}'; // Doesn't find such value. Drop an error
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment