If you're working with SASS and looking for something similar to an array, consider using a list instead. You can iterate through the list using the @each directive, as shown below:
@mixin roundcorners($collection: (top-left, top-right, bottom-right, bottom-left), $radius: 0)
@each $corner in $collection
border-#{$corner}-radius: $radius
For more information on using the @each directive in SASS, check out this link.
In this example, I've utilized string interpolation to insert the list value into the rule itself. Although I'm not certain if this is permitted, it's worth checking when you have access to your development environment.
I've also incorporated default values in the arguments, allowing you to specify a custom radius. Keep in mind that passing in any corner from the list will override the entire default list, so be mindful of this behavior.
An alternative and more straightforward approach could be:
@mixin rounded($topLeft:false, $topRight:false, $bottomRight:false, $bottomRight:false)
@if $topLeft != false
border-top-left-radius: $topLeft
@if $topRight != false
border-top-right-radius: $topRight
@if $bottomRight != false
border-bottom-right-radius: $bottomRight
@if $topLeft != false
border-bottom-left-radius: $topLeft
By setting defaults in this mixin, you can easily call it like this:
@include rounded(false, 9px, false, 9px)
Using 'false' instead of 0 as the default value ensures that unnecessary radius rules are not generated. It also provides flexibility to reset corners to a 0 radius when needed.