Essential SASS Mixins

Here's some SASS Mixins I've collected over the years.

Anti-Alias

@mixin antialias {
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Highlights

@mixin selection {
    ::-moz-selection { @content; }
    ::selection { @content; }
}

Unselectable

@mixin unselectable {
    -webkit-touch-callout: none;
    user-select: none;
}

Reset Box

@mixin reset-box {
    padding: 0;
    margin: 0;
}

Rem font output with px fallback

@mixin font-size($sizeValue: 1) {
    font-size: ($sizeValue * 16) * 1px;
    font-size: $sizeValue * 1rem;
}

Center block

@mixin center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Another way to center things

@mixin centerer($horizontal: true, $vertical: true) {
    position: absolute;
    @if ($horizontal and $vertical) {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    @else if ($horizontal) {
        left: 50%;
        transform: translate(-50%, 0);
    }
    @else if ($vertical) {
        top: 50%;
        transform: translate(0, -50%);
    }
}

Box Shadow

@mixin box-shadow($params) {
    -webkit-box-shadow: $params;
    -moz-box-shadow: $params;
    box-shadow: $params;
}

Aspect Ratio

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

Rounded edges/corners

@mixin border-radius($radius: 0.5em, $important: false) {
    @if $important {
        -webkit-border-radius: $radius !important;
        -moz-border-radius: $radius !important;
        border-radius: $radius !important;
    }
    @else {
        -webkit-border-radius: $radius;
        -moz-border-radius: $radius;
        border-radius: $radius;
    }
}

Clearfix (Inline)

@mixin clearfix() {
    content: "";
    display: table;
}

Clearfix (::after)

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

Hide from Screen-readers

@mixin hidden {
    display: none;
    visibility: hidden;
}

Generic Transform

@mixin transform($transforms) {
    -moz-transform: $transforms;
    -o-transform: $transforms;
    -ms-transform: $transforms;
    -webkit-transform: $transforms;
    transform: $transforms;
}

Transition

@mixin transition($args) {
    -webkit-transition: $args;
    -moz-transition: $args;
    -ms-transition: $args;
    -o-transition: $args;
    transition: $args;
}

Filters

Blur

@mixin blur($amount) {
    filter: blur($amount);
    -webkit-filter: blur($amount);
}

Black and White

@mixin greyscale($amount) {
    filter: grayscale($amount);
    -webkit-filter: grayscale($amount);
}

Rotate

@mixin rotate($deg) {
    @include transform(rotate(#{$deg}deg));
}

Opacity

@mixin opacity($opacity) {
    opacity: $opacity;
    $opacity-ie: $opacity * 100;
    filter: alpha(opacity=$opacity-ie); //IE8
}

Truncate String

@mixin text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Pseudo Content

@mixin pseudo($display: block, $pos: absolute, $content: ''){
    content: $content;
    display: $display;
    position: $pos;
}

Foundation Breakpoint Media Queries

@mixin size-real-medium {
    @media only screen and (max-width: 64em) {
        @content;
    }
}

@mixin size-real-large {
    @media only screen and (min-width: 64em) {
        @content;
    }
}

@mixin size-large {
    @media only screen and (min-width: 40em) {
        @content;
    }
}

@mixin size-small {
    @media only screen and (max-width: 39.9375em) {
        @content;
    }
}

@mixin size-real-small {
    @media only screen and (max-width: 30em) {
        @content;
    }
}

Custom Media Queries Alternative

$breakpoints: (
    "phone":        400px,
    "phone-wide":   480px,
    "phablet":      560px,
    "tablet-small": 640px,
    "tablet":       768px,
    "tablet-wide":  1024px,
    "desktop":      1248px,
    "desktop-wide": 1440px
);
@mixin mq($width, $type: min) {
    @if map_has_key($breakpoints, $width) {
        $width: map_get($breakpoints, $width);
        @if $type == max {
            $width: $width - 1px;
        }
        @media only screen and (#{$type}-width: $width) {
            @content;
        }
    }
}

// Z-Indexes

@function z($name) {
    @if index($z-indexes, $name) {
        @return (length($z-indexes) - index($z-indexes, $name)) + 1;
    } @else {
        @warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
        @return null;
    }
}
$z-indexes: (
    "outdated-browser",
    "modal",
    "site-header",
    "page-wrapper",
    "site-footer"
);

Hardware Acceleration

@mixin hardware($backface: true, $perspective: 1000) {
    @if $backface {
        backface-visibility: hidden;
    }
    perspective: $perspective;
}

Remove Margins From Top/Bottom

@mixin content-margins($selector: '> *', $last-child: false) {
    @if not $selector {
        $selector: '&';
    }
    #{unquote($selector)} {
        &:first-child { margin-top: 0; }
        @if $last-child {
            &:last-child { margin-bottom: 0; }
        }
    }
}

Retina Images

@mixin retina {
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-moz-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3 / 2),
    only screen and (min-device-pixel-ratio: 1.5),
    only screen and (min-resolution: 1.5dppx) {
        @content;
    }
}

Gradients

@function convert-angle($value, $unit) {
    $convertable-units: deg grad turn rad;
    $conversion-factors: 1 (10grad/9deg) (1turn/360deg) (3.1415926rad/180deg);
    @if index($convertable-units, unit($value)) and index($convertable-units, $unit) {
        @return $value / nth($conversion-factors, index($convertable-units, unit($value))) * nth($conversion-factors, index($convertable-units, $unit));
    }
    @warn "Cannot convert `#{unit($value)}` to `#{$unit}`.";
}

@function is-direction($value) {
    $is-direction: index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value);
    $is-angle: type-of($value)=='number' and index('deg' 'grad' 'turn' 'rad', unit($value));
    @return $is-direction or $is-angle;
}

@function legacy-direction($value) {
    @if is-direction($value)==false {
        @warn "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be an angle or a direction";
    }
    $conversion-map: ( to top: bottom, to top right: bottom left, to right top: left bottom, to right: left, to bottom right: top left, to right bottom: left top, to bottom: top, to bottom left: top right, to left bottom: right top, to left: right, to left top: right bottom, to top left: bottom right);
    @if map-has-key($conversion-map, $value) {
        @return map-get($conversion-map, $value);
    }
    @return 90deg - convert-angle($value, 'deg');
}

@mixin linear-gradient($direction, $color-stops...) {
    @if is-direction($direction)==false {
        $color-stops: ($direction, $color-stops);
        $direction: 180deg;
    }
    background: nth(nth($color-stops, 1), 1);
    background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
    background: linear-gradient($direction, $color-stops);
}

CSS Triangles

@mixin css-triangle($color, $direction, $size: 6px, $position: absolute, $round: false){
    @include pseudo($pos: $position);
    width: 0;
    height: 0;
    @if $round {
        border-radius: 3px;
    }
    @if $direction == down {
        border-left: $size solid transparent;
        border-right: $size solid transparent;
        border-top: $size solid $color;
        margin-top: 0 - round( $size / 2.5 );
    } @else if $direction == up {
        border-left: $size solid transparent;
        border-right: $size solid transparent;
        border-bottom: $size solid $color;
        margin-bottom: 0 - round( $size / 2.5 );
    } @else if $direction == right {
        border-top: $size solid transparent;
        border-bottom: $size solid transparent;
        border-left: $size solid $color;
        margin-right: -$size;
    } @else if  $direction == left {
        border-top: $size solid transparent;
        border-bottom: $size solid transparent;
        border-right: $size solid $color;
        margin-left: -$size;
    }
}

Fade Animation

@-webkit-keyframes fade_up {
    0% {
        @include opacity(0);
        @include transform(translate(0, 70px));
    }
    100% {
        @include transition(transform 1.1s ease-out);
        @include transform(translate(0, 0));
        @include opacity(1);
    }
}

@keyframes fade_up {
    0% {
        @include opacity(0);
        @include transform(translate(0, 70px));
    }
    100% {
        @include transition(transform 1.1s ease-out);
        @include transform(translate(0, 0));
        @include opacity(1);
    }
}

.animate {
    @include opacity(0);
    @include transform(translate(0, 100px));
    -webkit-animation-duration: 1.1s;
    animation-duration: 1.1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;

    &.reveal {
        -webkit-animation-name: fade_up;
        animation-name: fade_up;
    }
}

Small Big Animation

@keyframes smallbig {
    0%,
    100% {
        @include transform(scale(1));
    }
    50% {
        @include transform(scale(0));
    }
}