Question

I’m currently writing a mixin that would allow me to do a 3d box effect with layers of box-shadows.

The resulting code that gets returned would look something like this:

.someclass {
  box-shadow: 1px 0 1px #203891, 0 1px 1px #3852B1, 2px 1px 1px #203891,
  1px 2px 1px #3852B1, 3px 2px 1px #203891, 2px 3px 1px #3852B1;
}

this code is taken from css-tricks’ buttons.

I need help appending/joining lists with a comma separation:

Given the following two lists:

$bottom: 1px 0 1px $bottomcolor
$right: 0 1px 1px $rightcolor

I would like to join them to get:

$joined: 1px 0 1px $bottomcolor, 0 1px 1px $rightcolor

here’s what I got when using Sass’ built in list functions:

append($bottom, $right, comma) => 1px, 0, 1px, red, 0 1px 1px red

join($bottom, $right, comma) => 1px, 0, 1px, red, 0, 1px, 1px, red

Answer 1

just realized why the above code didn’t work because $bottom and $right aren’t 2D lists, only 1D lists….

I ended up solving my mixin like so:

@import compass

=boxeffect($depth, $bottomcolor, $rightcolor)

   $layers: 1px 0 1px $bottomcolor, 0 1px 1px $rightcolor

   @for $i from 1 through $depth
       $layers: append($layers, (#{$i + 1}px #{$i}px 1px $bottomcolor), comma)
       $layers: append($layers, (#{$i}px #{$i + 1}px 1px $rightcolor), comma)

   +box-shadow($layers)


.test
   +boxeffect(2, #222222, #333333)

with the outcome of:

/* line 18, ../sass/temp.sass */
.test {
  -webkit-box-shadow: 1px 0 1px #222222, 0 1px 1px #333333, 2px 1px 1px #222222, 1px 2px 1px #333333, 3px 2px 1px #222222, 2px 3px 1px #333333;
  -moz-box-shadow: 1px 0 1px #222222, 0 1px 1px #333333, 2px 1px 1px #222222, 1px 2px 1px #333333, 3px 2px 1px #222222, 2px 3px 1px #333333;
  box-shadow: 1px 0 1px #222222, 0 1px 1px #333333, 2px 1px 1px #222222, 1px 2px 1px #333333, 3px 2px 1px #222222, 2px 3px 1px #333333;
}