mixin

mixin.scss

//-----------------------------------浏览器前缀-----------------------------------------
//例子：@include css3(transition, 0.5s);
@mixin css3($property, $value) {
    @each $prefix in -webkit-,
    -moz-,
    -ms-,
    -o-,
    '' {
        #{$prefix}#{$property}: $value;
    }
}  

//-----------------------------------Retina图片-----------------------------------------
@mixin image-2x($image, $width, $height) {
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
        /* on retina, use image that's scaled by 2 */
        background-image: url($image);
        background-size: $width $height;
    }
}  

//-----------------------------------清除浮动-----------------------------------------
//引用例子：@include clearfix();
@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}  

//-----------------------------------Black和White-----------------------------------------
//特别声明，上面这个不属于Sass的Mixins范畴，是Sass的自定义函数功能。
//background:black(0.15);
//color:white(0.9);}
@function black($opacity) {
    @return rgba(0, 0, 0, $opacity)
}  

@function white($opacity) {
    @return rgba(255, 255, 255, $opacity)
}  

//-----------------------------------内阴影和外阴影-----------------------------------------
//引用例子:@include box-emboss(0.8, 0.05);
@mixin box-emboss($opacity, $opacity2) {
    box-shadow: white($opacity) 0 1px 0, inset black($opacity2) 0 1px 0;
}  

//-----------------------------------行高-----------------------------------------
//引用例子:@include line-height (16);
@mixin line-height($heightValue: 12) {
    line-height: $heightValue + px; //fallback for old browsers
    line-height: (0.125 * $heightValue) + rem;
}  

//-----------------------------------隐藏文字-----------------------------------------
//引用例子：
//.logo{
//    background: url("logo.png");
//    height:100px;
//    width:200px;
//   @include hide-text;
//}
@mixin hide-text {
    overflow: hidden;
    text-indent: -9000px;
    display: block;
}  

//-----------------------------------响应式断点-----------------------------------------
//引用例子：
//@include breakpoint(large) {
//    width: 60%;
//}
//@include breakpoint(medium) {
//    width: 80%;
//}
//@include breakpoint(small) {
//    width: 95%;
//}
@mixin breakpoint($point) {
    @if $point==large {
        @media (min-width: 64.375em) {
            @content;
        }
    }
    @else if $point==medium {
        @media (min-width: 50em) {
            @content;
        }
    }
    @else if $point==small {
        @media (min-width: 37.5em) {
            @content;
        }
    }
}  

//-----------------------------------正三角-----------------------------------------
//正三角的通用属性
%triangleBase {
    _font-size: 0;
    _line-height: 0;
    _overflow: hidden;
    width: 0;
    height: 0;  

}  

//regulaTriangle:正三角(dashed默认透明)
//例子：@include regulaTriangle(top,red);
@mixin regulaTriangle($derection:bottom, $color: #000, $width: 20px) {
    @extend %triangleBase;
    border-width: $width;
    //向右
    @if $derection==right {
        border-style: dashed dashed dashed solid;
        border-color: transparent transparent transparent $color;
    }
    //向左
    @if $derection==left {
        border-style: dashed solid dashed dashed;
        border-color: transparent $color transparent transparent;
    }
    //向上
    @if $derection==top {
        border-style: dashed dashed solid dashed;
        border-color: transparent transparent $color transparent;
    }
    //向下
    @if $derection==bottom {
        border-style: solid dashed dashed dashed;
        border-color: $color transparent transparent transparent;
    }
}  

//-----------------------------------直角三角形-----------------------------------------
//right-angledTriangle:直角三角形
//例子：@include right-angledTriangle(1,red);
@mixin right-angledTriangle ($derection:1, $color:#000, $width: 20px, $opacity:transparent, $border:dashed) {
    @extend %triangleBase;
    border-width: $width;
    //向右
    @if $derection==1 {
        border-style: $border dashed dashed $border;
        border-color: $color $opacity $opacity $color;
    }
    //向右
    @if $derection==2 {
        border-style: $border $border dashed dashed;
        border-color: $color $color $opacity $opacity;
    }
    //向右
    @if $derection==3 {
        border-style: dashed $border $border dashed;
        border-color: $opacity $color $color $opacity;
    }
    //向右
    @if $derection==4 {
        border-style: dashed dashed $border $border;
        border-color: $opacity $opacity $color $color;
    }
}  

//-----------------------------------圆角-----------------------------------------
//radius:圆角
//例子：@include radius(24,100%);
@mixin radius($num:1234, $size: 5px) {
    @if $num==1234 {
        -webkit-border-radius: $size; //Saf3+, Chrome
        -moz-border-radius: $size; //FF1+
        border-radius: $size; //Opera 10.5, IE 9
        -ms-border-radius: $size;
    }
    @if $num==12 {
        -webkit-border-top-left-radius: $size;
        border-top-left-radius: $size;
        -webkit-border-top-right-radius: $size;
        border-top-right-radius: $size;
        -moz-border-top-left-radius: $size;
        -ms-border-top-left-radius: $size;
        -moz-border-top-right-radius: $size;
        -ms-border-top-right-radius: $size;
    }
    @if $num==23 {
        -webkit-border-top-right-radius: $size;
        border-top-right-radius: $size;
        -webkit-border-bottom-right-radius: $size;
        border-bottom-right-radius: $size;
        -moz-border-top-right-radius: $size;
        -moz-border-bottom-right-radius: $size;
        -ms-border-top-right-radius: $size;
        -ms-border-bottom-right-radius: $size;
    }
    @if $num==34 {
        -webkit-border-bottom-right-radius: $size;
        border-bottom-right-radius: $size;
        -webkit-border-bottom-left-radius: $size;
        border-bottom-left-radius: $size;
        -moz-border-bottom-left-radius: $size;
        -moz-border-bottom-right-radius: $size;
        -ms-border-bottom-left-radius: $size;
        -ms-border-bottom-right-radius: $size;
    }
    @if $num==14 {
        -webkit-border-top-left-radius: $size;
        border-top-left-radius: $size;
        -webkit-border-bottom-left-radius: $size;
        border-bottom-left-radius: $size;
        -moz-border-top-left-radius: $size;
        -moz-border-bottom-left-radius: $size;
        -ms-border-top-left-radius: $size;
        -ms-border-bottom-left-radius: $size;
    }
    @if $num==13 {
        -webkit-border-top-left-radius: $size;
        -webkit-border-bottom-right-radius: $size;
        -ms-border-top-left-radius: $size;
        -ms-border-bottom-right-radius: $size;
        border-top-left-radiu: $size;
        -moz-border-top-left-radius: $size;
        border-bottom-right-radiu: $size;
        -moz-border-bottom-right-radius: $size;
    }
    @if $num==24 {
        -webkit-border-top-right-radius: $size;
        border-top-right-radius: $size;
        -webkit-border-bottom-left-radius: $size;
        border-bottom-left-radius: $size;
        -moz-border-top-right-radius: $size;
        -moz-border-bottom-left-radius: $size;
        -ms-border-top-right-radius: $size;
        -ms-border-bottom-left-radius: $size;
    }
}  

//-----------------------------------边框阴影-----------------------------------------
//boxshadow:边框阴影
//例子：@include boxshadow(24,100%);
@mixin boxshadow($x: 3px, $y: 3px, $shadowcolor: #cccccc) {
    -moz-box-shadow: $x $y 4px $shadowcolor; // FF3.5+
    -webkit-box-shadow: $x $y 4px $shadowcolor; // Saf3.0+, Chrome
    box-shadow: $x $y 4px $shadowcolor; // Opera 10.5, IE 9.0
    filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$shadowcolor}');
    /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$shadowcolor}')";
    /* IE8 */
}  

//-----------------------------------透明度-----------------------------------------
//myOpacity:透明度
//例子：@include myOpacity(0.3,93,197,16);
@mixin myOpacity($opacity:0.5, $r:0, $g:0, $b:0) {
    $xx: $opacity * 100;
    filter: alpha(opacity=$xx);
    background-color: rgba($r, $g, $b, $opacity); // rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色.两种都不被IE支持(IE9开始支持)
    //如果要兼容ie文字不透明，需要用元素把文字包裹起来，然后色值position：relative或者absolute。
    //opacity: $opacity;//opacity属性是css3的属性，也可以实现透明效果，跟background-color: rgba同样效果。
}
    //-----------------------------------透明度-----------------------------------------
//引用例子:@include opacity(0.8);
@mixin opacity($opacity) {
    opacity: $opacity;
    $opacity-ie: $opacity * 100;
    filter: alpha(opacity=$opacity-ie); //IE8
}
//-----------------------------------动画keyframes生成-----------------------------------------
//动画keyframes生成
//例子：@include keyframes(动画名称);
//@include keyframes(move-the-object) {
//    0% {
//        transform: translateX(0);
//    }
//    100% {
//        transform: translateX(200px);
//    }
//}
@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }
    @-moz-keyframes #{$animationName} {
        @content;
    }
    @-o-keyframes #{$animationName} {
        @content;
    }
    @keyframes #{$animationName} {
        @content;
    }
}

.