Usefull Sass mixins and functions

responsive.scss

$layout--breakpoints: ('xsmall': 480px, 'small':  640px, 'medium': 768px, 'large':  860px, 'xlarge': 1040px) !default;

@mixin respond-to($args...) {
    @each $name in $args {
        @if map-has-key($layout--breakpoints, $name) {
            @media only screen and (min-width: #{map-get($layout--breakpoints, $name)}) {
                @content;
            }
        }

        @else {
            @warn 'Unfortunately, no breakpoint could be retrieved from `#{$name}`. Please make sure it is defined in `#{$layout--breakpoints}` map.'
        }
    }
}

@mixin between($min, $max) {
    @if map-has-key($layout--breakpoints, $min) {
        $min: map-get($layout--breakpoints, $min);
    }

    @if map-has-key($layout--breakpoints, $max) {
        $max: map-get($layout--breakpoints, $max);
    }

    @media only screen and (min-width: $min) and (max-width: $max - 1px) {
        @content;
    }
}

spacing-mixin.scss

$layout--spacing: (
    0: 0,
    1: 0.25rem,
    2: 0.5rem,
    3: 0.75rem,
    4: 1rem,
    5: 1.25rem,
    6: 1.5rem,
    8: 2rem,
    10: 2.5rem,
    12: 3rem,
    16: 4rem,
    20: 5rem,
    24: 6rem,
    28: 7rem,
    32: 8rem,
    36: 9rem,
    40: 10rem,
    44: 11rem,
    64: 16rem,
    vw: 3vw
);

$layout--spacing-directions: (
    null: null,
    'top': '-top',
    'right': '-right',
    'bottom': '-bottom',
    'left': '-left',
    'x': '-left' '-right',
    'y': '-top' '-bottom'
) !default;

@mixin _spacingBuilder($type, $side, $size, $sign: '') {
    @if (map-has-key($layout--spacing-directions, $side) != true) {
        @warn 'Unfortunately, no side could be retrieved from `#{$side}`. Please make sure it is defined in `#{$layout--spacing-directions}` map.';
    }

    @if (map-has-key($layout--spacing, $size) != true) {
        @warn 'Unfortunately, no size could be retrieved from `#{$size}`. Please make sure it is defined in `#{$layout--spacing}` map.';
    }

    $direction-rules: map-get($layout--spacing-directions, $side);
    $spacing-size: map-get($layout--spacing, $size);

    @each $direction in $direction-rules {
        #{$type}#{$direction}: #{$sign}#{$spacing-size};
    }
}

@mixin padding($side, $size, $sign: '') {
    @include _spacingBuilder("padding", $side, $size, $sign);
}

@mixin margin($side, $size, $sign: '') {
    @include _spacingBuilder("margin", $side, $size, $sign);
}

spacing-utility.scss

$directions: (
    null: null,
    't': '-top',
    'r': '-right',
    'b': '-bottom',
    'l': '-left',
    'x': '-left' '-right',
    'y': '-top' '-bottom'
);

$sizes: (
    0: 0,
    1: 0.25rem,
    2: 0.5rem,
    3: 0.75rem,
    4: 1rem,
    5: 1.25rem,
    6: 1.5rem,
    8: 2rem,
    10: 2.5rem,
    12: 3rem,
    16: 4rem,
    20: 5rem,
    24: 6rem,
    32: 8rem,
    40: 10rem,
    48: 12rem,
    56: 14rem,
    64: 16rem,
    "auto": "auto"
);

// MARGIN
// margin bottom 1rem: `.mb-4`
@each $direction-name in map-keys($directions) {
    @each $size-name in map-keys($sizes) {
        .m#{$direction-name}-#{$size-name} {
            @each $direction in map-get($directions, $direction-name) {
                margin#{$direction}: map-get($sizes, $size-name);
            }
        }
    }
}

// PADDING
// padding bottom 1rem: `.pb-4`
@each $direction-name in map-keys($directions) {
    @each $size-name in map-keys($sizes) {
        .p#{$direction-name}-#{$size-name} {
            @each $direction in map-get($directions, $direction-name) {
                padding#{$direction}: map-get($sizes, $size-name);
            }
        }
    }
}

transition.scss

@mixin transition($properties...) {
    $unfolded: ();

    @for $i from 1 through length($properties) {
        $prop: nth($properties, $i);

        @if ($i == 1) {
            $unfolded: unquote($prop) 0.3s ease-in-out;
        }

        @else {
            $unfolded: $unfolded, unquote($prop) 0.3s ease-in-out;
        }
    }

    transition: $unfolded;
}