sass中常用的mixin

布满荆棘的人生 2022-05-20 03:28 264阅读 0赞

//-----------------------------------浏览器前缀-----------------------------------------
        //例子：@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][https_blog.csdn.net_u013909970_article_details_52231026]

[https_blog.csdn.net_u013909970_article_details_52231026]: https://blog.csdn.net/u013909970/article/details/52231026