common sass mixins

_mixins.scss

@mixin clear {
  *zoom: 1;

  &:after {
    content: '\20';
    display: block;
    clear: both;
    height: 0;
  }
}

@mixin bg($color: null, $url: '', $repeat: no-repeat, $position: null, $dir: 'dir/') {
  $url: $dir+$url;
  $url: image-url($url, true);
  background: $color url($url) $repeat $position;
}

@mixin bg_url($url: '', $dir: 'dir/') {
  $url: $dir+$url;
  $url: image-url($url, true);
  background-image: url($url);
}

@mixin bg_png24($color: null, $url: null, $repeat: no-repeat, $position: null, $dir: 'dir/') {
  @include bg($color, $url, $repeat, $position, $dir);
  $url: $dir+$url;
  _background: none;
  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#{image-url($url,true)}', sizingMethod='crop');
}

@mixin bgc_rgba($color: #000000, $alpha: .6) {
  $rgba: rgba($color, $alpha);
  background-color: $rgba;
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType = 0, StartColorStr = '#{ie-hex-str($rgba)}', EndColorStr = '#{ie-hex-str($rgba)}');

  :root & { filter: none; }
}

@mixin bg_gradient($starcolor, $endcolor) {
  background-image: -moz-linear-gradient($starcolor, $endcolor);
  background-image: -o-linear-gradient($starcolor, $endcolor);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, $starcolor), color-stop(100%, $endcolor));
  background-image: -webkit-linear-gradient($starcolor, $endcolor);
  background-image: -ms-linear-gradient($starcolor, $endcolor);
  background-image: linear-gradient($starcolor, $endcolor);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$starcolor}', EndColorStr='#{$endcolor}')";
  *filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#{$starcolor}', endColorstr = '#{$endcolor}', GradientType = 0);
}

//https://coderwall.com/p/iqn-gq
@mixin rotate($degrees: 45deg) {
  transform: rotate($degrees);
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=#{-1*sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})";
  *filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=#{-1*sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)});
  *zoom: 1;
}

@mixin arrow($color: #999, $width: 4px, $pos: top) {
  $border-color: none;
  $border-style: none;
  display: inline-block;
  width: 0;
  height: 0;
  border-width: $width;
  @if $pos == top {
    $border-color: $color transparent transparent transparent;
    $border-style: solid dashed dashed dashed;
  } @else if $pos == right{
    $border-color: transparent $color transparent transparent;
    $border-style: dashed solid dashed dashed;
  } @else if $pos == bottom{
    $border-color: transparent transparent $color transparent;
    $border-style: dashed dashed solid dashed;
  } @else {
    $border-color: transparent transparent transparent $color;
    $border-style: dashed dashed dashed solid;
  }
  border-color: $border-color;
  border-style: $border-style;
  font-size: 0;
  overflow: hidden;
  cursor: pointer;
}