_mixin.scss

$baseline-px: 16px;

@mixin rem($property, $px-values) {
  // Convert the baseline into rems
  $baseline-rem: $baseline-px / 1rem;
  // Print the first line in pixel values
  #{$property}: $px-values;
  // If there is only one (numeric) value, return the property/value line for it.
  @if type-of($px-values) == "number" {
    #{$property}: $px-values / $baseline-rem; }
  @else {
    // Create an empty list that we can dump values into
    $rem-values: unquote("");
    @each $value in $px-values {
      // If the value is zero or a string or a color, return unchanged input
      @if $value == 0 or type-of($value) == "string" or type-of($value) == "color" {
        $rem-values: append($rem-values, $value); }
      @else {
        $rem-values: append($rem-values, $value / $baseline-rem); } }
    // Return the property and its list of converted values
    #{$property}: $rem-values; } 
}


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

@mixin horizontal-list($list-margin: 0 8px 0 0) {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0;
    li {
        display: inline-block;
        position: relative;
        margin: $list-margin;
        padding: 0;
        &:last-of-type {margin-right: 0;}
        a {
            display: inline-block;
        }
    }
}

@mixin link-color($color) {
    color: $color;
     
    &:hover, &:active, &:focus {
        color: darken($color, 20%);
    }
}

@mixin box-emboss($opacity, $opacity2){
    box-shadow:rgba(white, $opacity) 0 1px 0, inset rgba(black, $opacity2) 0 1px 0;
}

@mixin letterpress($opacity){
    text-shadow:rgba(white, $opacity) 0 1px 0;
}

@mixin hide-text{
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}