Mixin de raio de borda SCSS útil

Gere propriedade CSS border-radius com prefixos de navegadores definidos, incluindo apenas um mixin SCSS (ou SASS).

Demonstração em CodePen: http://codepen.io/Simek/pen/Frxhq

Upss … O código aqui está quebrado, então copie-o do CodePen!

$prefixes: -webkit-, -moz-, -o-, "";

@mixin borderRadius($size...) {
    @if length($size) == 1 {
        @each $prefix in $prefixes {
            #{$prefix}border-radius: $size;
        }
    } @else {
        @include customBorderRadius($size...);
    }
}

@mixin customBorderRadius($topLeft: 0, $topRight: 0, $bottomRight: 0, $bottomLeft: 0) {
    @each $prefix in $prefixes {
        @if $prefix == "-moz-" {
            @if $topLeft != 0 { -moz-border-radius-topleft: $topLeft; }
            @if $topRight != 0 { -moz-border-radius-topright: $topRight; }
            @if $bottomRight != 0 { -moz-border-radius-bottomright: $bottomRight; }
            @if $bottomLeft != 0 { -moz-border-radius-bottomleft: $bottomLeft; }
        } @else {
            @if $topLeft != 0 { #{$prefix}border-top-left-radius: $topLeft; }
            @if $topRight != 0 { #{$prefix}border-top-right-radius: $topRight; }
            @if $bottomRight != 0 { #{$prefix}border-bottom-right-radius: $bottomRight; }
            @if $bottomLeft != 0 { #{$prefix}border-bottom-left-radius: $bottomLeft; }
        }
    }
}