mixin集

common.scss

@charset "utf-8";

//////////////////////////////////////////////////////
// defined global variables.

$prefixs: -webkit-, -moz-, -ms-, -o-, '';

//////////////////////////////////////////////////////
// defined mixins.

@mixin addPrefix($prop, $val) {
    @each $prefix in $prefixs {
        #{$prefix}#{$prop}: $val;
    }
}

@mixin addPrefix4Val($prop, $val) {
    @each $prefix in $prefixs {
        #{$prop}: #{$prefix}#{$val};
    }
}

@mixin borderRadius($r: 0) {
    @include addPrefix(border-radius, $r);
}

@mixin boxSizing($type: border-box) {
    @include addPrefix(box-sizing, $type);
}

@mixin boxFlex {
    @include addPrefix4Val(display, box);
}

@mixin gradient($val) {
    @include addPrefix4Val(
        background, $val
    );
}


//////////////////
// debug only

body {
    @include borderRadius(4px);
    @include boxFlex;
    @include boxSizing;
    @include gradient("linear-gradient(180deg, #fff 0%, #000 100%), linear-gradient(180deg, #fff 0%, #000 100%)");
}