Cacher is the code snippet organizer for pro developers

###Fluid properties (via)

@mixin fp($property, $min, $max, $start: 320, $end: breakpoint('desktop'), $clip: true, $clipAtStart: true, $clipAtEnd: true) {
    $start: $start / ($start * 0 + 1);
    $end: $end / ($end * 0 + 1);
    $multiplier: ($max - $min) / ($end - $start) * 100;
    $adder: ($min * $end - $max * $start) / ($end - $start);
    $formula: calc(#{$multiplier + 0vw} + #{$adder + 0px});
    @if $clip and $clipAtStart {
        @media (max-width: #{$start + 0px}) {
            #{$property}: $min + 0px;
        }
    }
    @if $clip and $clipAtEnd {
        @media (min-width: #{$end + 0px}) {
            #{$property}: $max + 0px;
        }
    }
    #{$property}: $formula;
}

###Pseudo

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

###Responsive ratio

@mixin responsive-ratio($x,$y, $pseudo: false) {
  $padding: unquote( ( $y / $x ) * 100 + '%' );
  @if $pseudo {
    &:before {
      @include pseudo($pos: relative);
      width: 100%;
      padding-top: $padding;
    }
  } @else {
    padding-top: $padding;
  }
}

###Triangle

@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;
  }
}

###Media queries

$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-index

@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 {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    perspective: $perspective;
}

###Truncate ellipsis

@mixin truncate($truncation-boundary) {
    max-width: $truncation-boundary;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

###Hide, Visible, Screen readers

// Hide from both screenreaders and browsers

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

@mixin visible($state: 'block') {
    display: unquote($state);
    visibility: visible;
}

// Hide only visually, but have it available for screenreaders
@mixin vh($focusable: false) {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;

    @if $focusable {
        @include vh-focusable;
    }
}

@mixin vh-reset {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

// Allow the element to be focusable when navigated to via the keyboard
@mixin vh-focusable {
    &:active,
    &:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }
}

// Hide visually and from screenreaders, but maintain layout
@mixin invisible {
    visibility: hidden;
}

###Retina

@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;
    }
}

###Antialias

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

###Appearance

@mixin appearance($val: none) {
    -webkit-appearance: $val;
    -moz-appearance: $val;
    appearance: $val;
}

###Unselectable

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

Unclickable

@mixin unclickable {
    pointer-events: none;
}