SCSS之MIXIN

正方形

@mixin square($size){
    width: $size;
    height: $size;
}

矩形

@mixin cube($w, $h){
    width: $w;
    height: $h;
}

圆形

@mixin circle($size){
    @include square($size);
    border-radius: 50%;
}

背景填充

@mixin bg($color: #fff){
    @if $color != #fff {
        background: $color;
    } @else {
        $r: floor(random() * 256);
        $g: floor(random() * 256);
        $b: floor(random() * 256);
        $a: floor(random() * 2 + 2) / 10;
        $color: rgba($r, $g, $b ,$a);
        background: $color;
    }
}

定位

@mixin PA{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

@mixin PLR($y: 0){
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: $y;
}

@mixin PTB($X: 0){
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: $x;
}