@mixin@extendメモ

// 矢印
.arrow{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 5px solid #000;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

//clearfix
@mixin clearfix {
    zoom: 1;
    &:before,
    &:after {
        display: block;
        height: 0;
        visibility: hidden;
        content: "\0020";
    }
    &:after {
        clear: both;
    }
}

//グラデーション
@mixin grad($color1, $color2){
    background: $color1;
    background: -moz-linear-gradient(top,  $color1 0%, $color2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color1), color-stop(100%,$color2));
    background: -webkit-linear-gradient(top,  $color1 0%,$color2 100%);
    background: -o-linear-gradient(top,  $color1 0%,$color2 100%);
    background: -ms-linear-gradient(top,  $color1 0%,$color2 100%);
    background: linear-gradient(to bottom,  $color1 0%,$color2 100%);
}

//2013-02-22編集

//以前の記述だとinsetを上手く使えなかったため、条件分岐を追加して対応

//box-shadow
@mixin box-shadow($top, $left, $blur, $red, $green, $blue, $opacity, $inset : false) {
  @if $inset == true {
    -moz-box-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity) inset;
    -webkit-box-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity) inset;
    box-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity) inset;
  } @else {
    -moz-box-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity);
    -webkit-box-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity);
    box-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity);
  }
}

//text-shadow
@mixin text-shadow($top, $left, $blur, $red, $green, $blue, $opacity) {
 -moz-text-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity);
 -webkit-text-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity);
 text-shadow: #{$top}px #{$left}px #{$blur}px rgba($red,$green,$blue,$opacity);
}