一些实用的sass混合宏

0.0放一下

响应式

$media-stack:
(group: tablet, id: general, rule: "screen and (max-width: 960px)"),
(group: small, id: general, rule: "screen and(max-width: 640px)"),
(group: small, id: small, rule: "screen and(max-width: 320px)"),
(group: print, id: general, rule: "print");

@mixin media($group, $id: general){
    @each $media in $media-stack{
        @if($group == map-get($media, group) and $id == map-get($media, id)){
            $rule: map-get($media, rule);
            @media #{$rule} {@content}
        }
    }
}

@mixin retina() {
    @media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (min-device-pixel-ratio: 2) {
        @content
    }

}

px to rem

@function px2rem($pxs, $base-font-size: 64px) {
    $result: '';

    @each $px in $pxs {
        $rem: $px;

        @if $result != '' {
            $result : $result + ' ';
        }

        @if type_of($px) == number {
            $rem : ($px / $base-font-size) * 1rem;
        }

        $result : $result + $rem;
    }

    @return unquote($result);
}

font size

@mixin font-dpr($font-size) {
    font-size: $font-size;

    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }

    [data-dpr="3"] & {
        font-size: $font-size * 3;
    }
}

IE hack

@mixin opacity($value) {
    opacity: $value;
    filter: alpha(opacity=$value*100);
}

@mixin inline-block() {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

@mixin min-height($height) {
    min-height: $height;
    _height: $height;
    overflow: visible;
}

@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
    // Safari 5.1-6, Chrome 10+
    background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); 
     
    // Opera 12
    background-image: -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); 
     
    // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
    background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); 
    
    background-repeat: repeat-x;
    
    // IE9 and down
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); 
}
Comments
Write a Comment