Cacher is the code snippet organizer for pro developers

//MIXINS PARTIAL

//SAME WIDTH & HEIGHT
//Demo: http://codepen.io/ricardozea/pen/hftIe
//Usage: @include wh(20px,40px); or @include wh(20px);
@mixin size($width, $height:$width) {
  width:$width;
  height:$height;
}

//LINKS
@mixin linksColors-lvhaf($link, $visited, $hover, $active, $focus) {
  a { transition:.2s; padding:1%; margin:-1%; text-decoration:underline;
    &         { color:$link; }
    &:visited { color:$visited; }
    &:hover   { color:$hover; text-decoration:none; }
    &:active  { color:$active; outline:#ccc 1px dotted; }
    &:focus   { color:$focus; }
  }
}

//INSIDE BORDERS
  //Demo: http://codepen.io/ricardozea/pen/5d729855e63d404f0dfa46bda3bb56d1/
  //Usage: @include ib(2em, orange, .5);
$ib-defaults: (
  thickness : 2px,
  color     : black,
  alpha     : .1
) !default;

//Use a "variable argument" to accept any number of values.
@mixin inside-border($values...) {
  $border-thickness: map-get($ib-defaults, "thickness");
  $border-color: map-get($ib-defaults, "color");
  $border-alpha: map-get($ib-defaults, "alpha");

  @each $value in $values {
    @if type-of($value) == "number" {
      @if unitless($value) {
        $border-alpha: $value;
      }

      @else {
        $border-thickness: $value;
      }
    }

    @else if type-of($value) == "color" {
      $border-color: $value;
    }

    @else {
      @warn "Warning! Unexpected value: `#{$value}`.";
    }
  }

  box-shadow: inset 0 0 0 $border-thickness rgba($border-color, $border-alpha);
}

@mixin ib($values...) {
  @include inside-border($values...);
}

//PLACEHOLDERS
  //Top Nav: Style for hover and active links
  %link-hover-active { position:relative; top:-1px; z-index:1; color:black; @extend %border-drop-shadow; }

  //Borders and drop shadow on nav items and Category Page headings
  %border-drop-shadow { box-shadow:0 1px 0 rgba(black,.4), inset 0 0 0 1px rgba(black,.05); }