Sass: Mixins

sass-mixins

@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}

@mixin font-size($size: 16, $line: 1.5) {
  font-size: $size + px;
  font-size: ($size / 10) + rem;
  @if unitless($line) {
    line-height: $line;
  } @else {
    line-height: strip-units($line / $size);
  }
}

@mixin font-family($fontFamily) {
  @if $fontFamily == OpenSans {
    font-family: "Open Sans", $fontStack;
  } @else if $fontFamily == OpenSansBold {
    font-family: "Open Sans Bold", $fontStack;
  } @else if $fontFamily == OpenSansItalic {
    font-family: "Open Sans Italic", $fontStack;
  }
}

@mixin ir {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;

  > a {
    display: block;
    height: 100%;
  }
}

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

@mixin row {
  letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
  *letter-spacing: normal; /* reset IE < 8 */
  *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
}

@mixin column {
  letter-spacing: normal;
  word-spacing: normal;
}

@mixin list-style-none {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

@mixin centered-list($spacing) {
  @include row;
  text-align: center;

  li {
    @include column;
    list-style-type: none;
    display: inline-block;
    margin: 0 $spacing 0 0;
    padding: 0;

    &:last-child {
      margin-right: 0;
    }
  }
}

@mixin horizontal-list($spacing) {
  list-style-type: none;
  float: left;
  display: inline-block;
  margin: 0 $spacing 0 0;
  padding: 0;

  &:last-child {
    margin-right: 0;
  }
}

@mixin horizontal-list-pipes($spacing, $color) {
  @include horizontal-list(0);

  &:after {
    content: "|";
    color: $color;
    margin: 0 $spacing;
  }
  &:last-child {
    &:after {
      content: "";
      margin: 0;
    }
  }
}

@mixin form-field($borderRadius: 3px, $color: #fff) {
  background-color: $color;
  border: none;
  padding: 10px;
  @include border-radius($borderRadius);
  border-color: $color;
}

@mixin placeholder($color) {
  ::-webkit-input-placeholder {
    @include font-family(OpenSansItalic);
    color: $color;
  }
  :-moz-placeholder { /* Firefox 18- */
    @include font-family(OpenSansItalic);
    color: $color;
  }
  ::-moz-placeholder { /* Firefox 19+ */
    @include font-family(OpenSansItalic);
    color: $color;
  }
  :-ms-input-placeholder {
    @include font-family(OpenSansItalic);
    color: $color;
  }
}

@mixin button($borderRadius, $background, $color, $borderColor) {
  background: $background;
  color: $color;
  text-align: center;
  border: none;
  border-bottom: 2px solid $borderColor;
  @include border-radius($borderRadius);
}

$icon-spacing: 100px !default;
$icon: sprite-map("sprite/icon/*.png",
  $position: 100%,
  $spacing: $icon-spacing
);