CODEWITHSUNDEEP
sass
bookcasey
bookcasey

Reputation: 40521

Multiple values for one property with variable argument lists in Sass

I'm looking to have a mixin like +stacktextshadow(blue, red, green) spit out text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green;

Currently this is what I have: 

=stacktextshadow($shadows...)
  @for $i from 1 through length($shadows)
    $shadow1: append(1px 1px 0, nth($shadows,1))
    $shadow2: append(2px 2px 0, nth($shadows,2))
    $shadow3: append(3px 3px 0, nth($shadows,3))
    text-shadow: $shadow1, $shadow2, $shadow3

h1
  +stacktextshadow(blue, red, green)

Which gives me:

h1 {
  text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green;
  text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green;
  text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green; }

Tripled. And I know why, because it's running the text-shadow property declaration three times in the @for loop. I'd like it to only do that once. However, when I take the text-shadow out of the foor loop, it doesn't have access to $shadow1, $shadow2, etc.

Also, I'd like to not repeat myself with something along the lines of: $shadow($i): append($i*1px $i*1px 0, nth($shadows,$i)) (which obviously doesn't work) so that it is all done dynamically—whether I pass one argument into the mixin, or 20.

Upvotes: 6

Views: 2712

Answers (1)

hopper
hopper

Reputation: 13410

You can create a variable outside the loop to "collect" the shadow values, and then use that variable in your text-shadow property. Example:

=stacktextshadow($shadows...)
  $all: ()
  @for $i from 1 through length($shadows)
    $all: append($all, append($i*1px $i*1px 0, nth($shadows, $i)), comma)

  text-shadow: $all

h1
  +stacktextshadow(blue, red, green)

Output:

h1 {
  text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green; }

Upvotes: 6

Related Questions