sassよく使うmixin

prefixを追加する

@mixin css3($property, $value) {
     @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
          #{$prefix}#{$property}: $value;
     }
}

回り込み禁止

//clear fix
@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

CSSアニメーション

@mixin transition($time:500ms) {
  -webkit-transition: all $time cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: all $time cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: all $time cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all $time cubic-bezier(0.165, 0.84, 0.44, 1);
}

CSSアニメーション解除

@mixin transitionNone() {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}

グラデーション

@mixin gradient($fromColor, $toColor) {
  background-color: $toColor; /* Fallback Color */
  background-image: -webkit-gradient(linear, left top, left bottom, from($fromColor), to($toColor)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, $fromColor, $toColor); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, $fromColor, $toColor); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, $fromColor, $toColor); /* IE10 */
  background-image:      -o-linear-gradient(top, $fromColor, $toColor); /* Opera 11.10+ */
  background-image:         linear-gradient(top, $fromColor, $toColor);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{$fromColor}', EndColorStr='#{$toColor}');
}

placeholderスタイル

@mixin placeholder(){
  &::-webkit-input-placeholder{
    @content;
  }
  &:-ms-input-placeholder{
    @content;
  }
  &::-moz-placeholder{
    @content;
  }
}

半透明

@mixin opacity($opacity) {

  -webkit-opacity: $opacity;
  -moz-opacity: $opacity;
  -o-opacity: $opacity;
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

回転

@mixin rotate( $degrees ) {
  -webkit-transform: rotate(#{$degrees}deg);
  -moz-transform: rotate(#{$degrees}deg);
  -ms-transform: rotate(#{$degrees}deg);
  -o-transform: rotate(#{$degrees}deg);
  transform: rotate(#{$degrees}deg);

  filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)});
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})";
  zoom: 1;
 }

ブレークポイント

@mixin screen($break-point-min, $break-point-max) {
  @media screen and (min-width: $break-point-min) and (max-width: $break-point-max) {
    @content;
  }
}

@mixin min-screen($break-point-min) {
  @media screen and (min-width: $break-point-min) {
    @content;
  }
}

@mixin fontsize($size: 24, $base: 14) {
  font-size: $size + px;
  font-size: ($size / $base) * 1rem;
}

@mixin box_shadow($value...) {
  @include css3(box-shadow,$value);
}

@mixin text-shadow($value...) {
  text-shadow: $value;
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -mos-border-radius: $radius;
  -o-border-radius: $radius;
  border-radius: $radius;
  background-clip: padding-box;  /* stops bg color from leaking outside the border: */
}

// Single side border-radius

@mixin border-top-radius($radius) {
  -webkit-border-top-right-radius: $radius;
  border-top-right-radius: $radius;
   -webkit-border-top-left-radius: $radius;
   border-top-left-radius: $radius;
   background-clip: padding-box;
}
@mixin border-right-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
  -webkit-border-top-right-radius: $radius;
  border-top-right-radius: $radius;
  background-clip: padding-box;
 }
@mixin border-bottom-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
   -webkit-border-bottom-left-radius: $radius;
   border-bottom-left-radius: $radius;
   background-clip: padding-box;
}
@mixin border-left-radius($radius) {
  -webkit-border-bottom-left-radius: $radius;
  border-bottom-left-radius: $radius;
  -webkit-border-top-left-radius: $radius;
  border-top-left-radius: $radius;
  background-clip: padding-box;
}

@mixin box-sizing($box-model) {
  -webkit-box-sizing: $box-model;
     -moz-box-sizing: $box-model;
      -ms-box-sizing: $box-model; 
       -o-box-sizing: $box-model;
           box-sizing:$box-model;
}

// keyframes mixin
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

@mixin htc_pie() {
  -ms-behavior: url(PIE.htc);
}

@mixin htc_backgroundsize() {
  -ms-behavior: url(backgroundsize.min.htc);
}