Useful SCSS border-radius Mixin
Generate CSS border-radius property with defined browsers prefixes including only one SCSS (or SASS) mixin.
Demo at CodePen: http://codepen.io/Simek/pen/Frxhq
Upss... Code here is broken, so copy it from 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; }
}
}
}
Written by Simek
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#