SASS mixins

sass_mixins.css.scss

@mixin clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    min-height: 0;
  }
}

@mixin border-radius($width: 4px) {
  -moz-border-radius: $width;
  -webkit-border-radius: $width;
  border-radius: $width;
}

@mixin border-top-left-radius($width: 4px) {
  -webkit-border-top-left-radius: $width;
  -moz-border-radius-topleft: $width;
  border-top-left-radius: $width;
}

@mixin border-top-right-radius($width: 4px) {
  -webkit-border-top-right-radius: $width;
  -moz-border-radius-topright: $width;
  border-top-right-radius: $width;
}

@mixin border-left-radius($width: 4px) {
  -webkit-border-top-left-radius: $width;
  -webkit-border-bottom-left-radius: $width;
  -moz-border-radius-topleft: $width;
  -moz-border-radius-bottomleft: $width;
  border-top-left-radius: $width;
  border-bottom-left-radius: $width;
}

@mixin border-right-radius($width: 4px) {
  -webkit-border-top-right-radius: $width;
  -webkit-border-bottom-right-radius: $width;
  -moz-border-radius-topright: $width;
  -moz-border-radius-bottomright: $width;
  border-top-right-radius: $width;
  border-bottom-right-radius: $width;
}

@mixin border-bottom-radius($width: 4px) {
  -webkit-border-bottom-right-radius: $width;
  -webkit-border-bottom-left-radius: $width;
  -moz-border-radius-bottomright: $width;
  -moz-border-radius-bottomleft: $width;
  border-bottom-right-radius: $width;
  border-bottom-left-radius: $width;
}

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  -ms-box-shadow: $shadows;
  -o-box-shadow: $shadows;
  box-shadow: $shadows;
}

@mixin box-sizing {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@mixin linear-gradient($from_color: transparent, $from_percent: 0%, $to_color: rgba(0,0,0,.05), $to_percent: 100%, $position: top, $background_color: "") {
  @if $background_color != "" {
    background-color: $background_color;
  } @else {
    background-color: $to_color;
  }
  background-image: -webkit-linear-gradient($position, $from_color $from_percent,$to_color $to_percent); /* Chrome10+,Safari5.1+ */
  background-image: -moz-linear-gradient($position, $from_color $from_percent, $to_color $to_percent); /* FF3.6+ */
  background-image: -ms-linear-gradient($position, $from_color $from_percent,$to_color $to_percent); /* IE10+ */
  background-image: -o-linear-gradient($position, $from_color $from_percent,$to_color $to_percent); /* Opera11.10+ */
  background-image: linear-gradient($position, $from_color $from_percent,$to_color $to_percent); /* W3C */
}

@mixin calc($property, $expression) {
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: -moz-calc(#{$expression});
  #{$property}: -o-calc(#{$expression});
  #{$property}: calc(#{$expression});
}

@mixin transition($effect: ease-out 0.4s) {
  -webkit-transition: $effect;
  -moz-transition: $effect;
  -o-transition: $effect;
  transition: $effect;
}

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