Question

I’m learning SASS and I’m trying to pass a collection of data (an array) into a @mixin and process based on that. The trouble I’m having is defining the data structure to pass the values into the @mixin

Here’s some pseudo code:

@mixin roundcorners($collection) {

    $collectionLength = length(collection);

    @for($i from 0 to $collectionLength) {
        border-#{$collection[$i]}-radius: 9px;
    }

}

.mybox {

    @include roundcorners(['top-right','bottom-left']);

}

The desired output would be this:

.mybox {
    border-top-right-radius: 9px;
    border-bottom-left-radius: 9px;
}

Answer 1

The closest thing SASS has to an array is a list, which you can iterate with the @each directive, like so:

@mixin roundcorners($collection: (top-left, top-right, bottom-right, bottom-left), $radius: 0)
   @each $corner in $collection
     border-#{$corner}-radius: $radius

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#each-directive

I’ve used string interpolation to drop the value of the list entry into the rule itself – I’m not entirely sure that’s legal, but I’m not on my dev. machine to check.

I’ve also used default values on the arguments, which means you can pass in a custom radius. If you do pass in any corner in the list, you’ll clear the whole default list (which I think is what you want, but something to be aware of).

A different, simpler way to do this might 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, you can call this mixin like:

@include rounded(false, 9px, false, 9px)

Using ‘false’ instead of 0 as the default means you don’t create more radius rules than you need. It also means you can override and set corners back to 0 radius if you need to.