Border radius Sass Mixin

Question

At the time i use 2 Mixins for my Border Radius:

// When the Input is 1 Variable
@mixin border-radius($pixel) {
  border-radius: $pixel;
}

// When the Inputs are 4 Variables
@mixin border-radius-s($tl, $tr, $br, $bl) {
  border-top-left-radius: $tl;
  border-top-right-radius: $tr;
  border-bottom-right-radius: $br;
  border-bottom-left-radius: $bl;
}

I'm trying to find a way to combine those mixins in to one! Probably with an if else for the input. I've tried around but couldn't find any good working solution.

Anyone that could help me on that ?

Answer 1

You can set the mixin to accept a list of values, as shown in the docs.

@mixin border-radius($pixel...) {
  border-radius: $pixel;
}