I have the following SCSS mixin for which I'm probably writing too much redundant stuff:
@mixin radius($topleft, $topright: $topleft, $bottomright: $topleft, $bottomleft: $topleft) {
-moz-border-radius-topleft: $topleft;
-moz-border-radius-topright: $topright;
-moz-border-radius-bottomright: $bottomright;
-moz-border-radius-bottomleft: $bottomleft;
-webkit-border-radius: $topleft $topright $bottomright $bottomleft;
border-radius: $topleft $topright $bottomright $bottomleft;
}
Note the arguments can take a single value to apply for all sides, or all 4 for customization.
I recomend you to use
@import "compass/css3";
@include border-radius(3px);
You could combine the first four lines into:
-moz-border-radius: $topleft $topright $bottomright $bottomleft;
Apart from that, if you want to retain the option of being able to specify separate values for different edges and keep your code cross-browser compatible, there is nothing you can do to reduce the code anymore.
The syntax of moz-borer-radius
-moz-border-radius: { { length | percentage } 1 to 4 values | inherit } ;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With