My SASS Mixins

mixins.scss

// MEDIA QUERIES: Default
@mixin mq($width, $height: false) {
    @if $height {
        @media ( min-width: + $width ) and ( min-height: + $height ) {
            @content;
        }
    }@else {
        @media ( min-width: + $width ) {
            @content;
        }
    }
}

// MEDIA QUERIES: Range
@mixin mq_range($min, $max, $height: false) {
    @if $height {
        @media ( min-height: + $min ) and ( max-width: + $max ) and ( min-height: + $height ) {
            @content;
        }
    }@else {
        @media ( min-width: + $min ) and ( max-width: + $max ) {
            @content;
        }
    }
}

// MEDIA QUERIES: Retina
@mixin mq_retina {
    @media
        only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (min--moz-device-pixel-ratio: 2),
        only screen and (-o-min-device-pixel-ratio: 2/1),
        only screen and (min-device-pixel-ratio: 2),
        only screen and (min-resolution: 192dpi),
        only screen and (min-resolution: 2dppx) {
        @content;
    }
}

// MEDIA QUERIES: Print
@mixin mq_print {
    @media print {
        @content;
    }
}

//returns IE10 & IE11 styles
@mixin IE10up() {
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        @content;
    }
}
@mixin ff() {
    @-moz-document url-prefix() { 
        @content;
    }
}

// omega reset for bourbon neat
@mixin omega-reset($nth) {
  &:nth-child(#{$nth}) { margin-right: flex-gutter(); }
  &:nth-child(#{$nth}+1) { clear: none }
}

// covers it's parent
@mixin cover() {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

@mixin visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

// center all the things
@mixin center($position) {
    position: absolute;

    @if $position == 'vertical' {
        top: 50%;
        transform: translateY(-50%);
    }

    @else if $position == 'horizontal' {
        left: 50%;
        transform: translateX(-50%);
    }

    @else if $position == 'both' {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

// Style placeholders
@mixin input-placeholder {
    &.placeholder { @content; }
    &:-moz-placeholder { @content; }
    &::-moz-placeholder { @content; }
    &:-ms-input-placeholder { @content; }
    &::-webkit-input-placeholder { @content; }
}

// all inputs
@mixin all_inputs {
    textarea, select, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="submit"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]{
        @content;
    }
}

// aspect ratio

@mixin aspect-ratio($width, $height) {
    &:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: ($height / $width) * 100%;
    }
    > .aspect-ratio {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

// shadows
@mixin lifted($height: false) {
    @if $height == 1 {
        box-shadow: 0 2px 4px 0 rgba($black, 0.37);
    } @else if $height == 2 {
        box-shadow: 0 6px 10px 0 rgba($black, 0.3), 0 2px 2px 0 rgba($black, 0.2);
    } @else if $height == 3 {
        box-shadow: 0 13px 25px 0 rgba($black, 0.3), 0 7px 7px 0 rgba($black, 0.19);
    } @else if  $height == 4 {
        box-shadow: 0 20px 40px 0 rgba($black, 0.3), 0 14px 12px 0 rgba($black, 0.17);
    } @else {
        box-shadow: 0 27px 55px 0 rgba($black, 0.3), 0 17px 17px 0 rgba($black, 0.15);
    }
}

@mixin clear() {
    &:after {
        content: '';
        display: table;
        clear: both;
    }
}

// SVG
// Helper function
// Return null rather than throwing an error if index is outside list range.
@function nth-or-null($list, $index) {
  @return if(length($list) >= $index, nth($list, $index), null);
}


//
//  Function to replace characters in a string
//
@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);
    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace +
        str-replace(str-slice($string, $index +
        str-length($search)), $search, $replace);
    }
    @return $string;
}

//
//  Function to create an optimized svg url
//  (may need a few extra replacements)
//
@function old_svg-url($svg){
    $svg: str-replace($svg,'"','\'');
    $svg: str-replace($svg,'<','%3C');
    $svg: str-replace($svg,'>','%3E');
    $svg: str-replace($svg,'&','%26');
    $svg: str-replace($svg,'#','%23');
    @return url("data:image/svg+xml;charset=utf8,#{$svg}");
}
@function svg-url($svg){
    //
    // Chunk up string in order to avoid
    // "SystemStackError: stack level too deep"
    //
    $encoded:'';
    $slice: 2000;
    $index: 0;
    $loops: ceil(str-length($svg)/$slice);
    @for $i from 1 through $loops {
        $chunk: str-slice($svg, $index, $index + $slice - 1);
        $chunk: str-replace($chunk,'"','\'');
        $chunk: str-replace($chunk,'<','%3C');
        $chunk: str-replace($chunk,'>','%3E');
        $chunk: str-replace($chunk,'&','%26');
        $chunk: str-replace($chunk,'#','%23');
        $encoded: #{$encoded}#{$chunk};
        $index: $index + $slice;
    }
    @return url("data:image/svg+xml;charset=utf8,#{$encoded}");
}