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;  
//    200px;  
//   @include hide-text;  
//}  
@mixin hide-text {  
    overflow: hidden;  
    text-indent: -9000px;  
    display: block;  
}  
  
//-----------------------------------响应式断点-----------------------------------------  
//引用例子：  
//@include breakpoint(large) {  
//     60%;  
//}  
//@include breakpoint(medium) {  
//     80%;  
//}  
//@include breakpoint(small) {  
//     95%;  
//}   
@mixin breakpoint($point) {  
    @if $point==large {  
        @media (min- 64.375em) {  
            @content;  
        }  
    }  
    @else if $point==medium {  
        @media (min- 50em) {  
            @content;  
        }  
    }  
    @else if $point==small {  
        @media (min- 37.5em) {  
            @content;  
        }  
    }  
}  
  
//-----------------------------------正三角-----------------------------------------  
//正三角的通用属性  
%triangleBase {  
    _font-size: 0;  
    _line-height: 0;  
    _overflow: hidden;  
     0;  
    height: 0;  
      
}  
  
//regulaTriangle:正三角(dashed默认透明)  
//例子：@include regulaTriangle(top,red);  
@mixin regulaTriangle($derection:bottom, $color: #000, $ 20px) {  
    @extend %triangleBase;  
    border- $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, $ 20px, $opacity:transparent, $border:dashed) {  
    @extend %triangleBase;  
    border- $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;  
    }  
}

.