Reusable function/mixin for sass function -

i'm wondering if there's simple way re use mixin comma separating passed information?

example, if wanted output css based on how many things passed through mixin.

mixin

@mixin generate($number...){    .item-#{$number} {@content} } 

include

@include generate(1, 2){color:red;}  

i'd output:

.item-1 {color:red;} .item-2 {color:red;} 

example 2

@include generate(1, 5, 6){color:red;}  

which output:

.item-1 {color:red;} .item-5 {color:red;} .item-6 {color:red;} 

this very simplified version of want, don't care mixin looks like, or how handles it, want include @include generate(1,2,6,5){color:red;}.

thankyou!

shannon

basic usage

use @each loop.

@mixin generate($numbers...){   @each $number in $numbers {    .item-#{$number} {@content;}   } }  @include generate(1, 2, 6); 

demo: http://sassbin.com/gist/5999585/

advanced usage

you can use @for loop have both item , index. also, can use list of lists pass multiple values each element:

=generate($items...)   @for $i 1 through length($items)     $item: nth($items, $i)     $offset: nth($item, 1)     $color: nth($item, 2)      .block-#{$i}       margin-left: $offset       background-color: $color  +generate(10 red, 20 green, 60 blue) 

i've switched indented .sass syntax rid of curly braces , semicolons nuisance.

demo: http://sassbin.com/gist/6007849/

precaution

i hope example synthetic. if use in production, you're doing wrong! use extends instead:

%item { color: red};  .item-1, .item-2, .item-6 {   @extend %item; } 

the resulting css appear different (shorter same functionality):

.item-1, .item-2, .item-6 {   color: red; } 

demo: http://sassbin.com/gist/5999603/