Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to simplify this SCSS border radius Mixin? -- Sass Beginner

Tags:

css

sass

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.

like image 681
Jacob Avatar asked Dec 28 '25 15:12

Jacob


2 Answers

I recomend you to use

@import "compass/css3";
@include border-radius(3px);
like image 57
FDisk Avatar answered Dec 31 '25 06:12

FDisk


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 } ;
like image 28
xbonez Avatar answered Dec 31 '25 05:12

xbonez



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!