sass中常用的mixin

    //-----------------------------------浏览器前缀-----------------------------------------
    //例子：@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;
        }
    }

转自：https://blog.csdn.net/u013909970/article/details/52231026