Writing a SASS mixin for 3d text with depth

Question

I have the following SASS mixin in my project

@mixin text_3d($color){
  color: $color; 
  text-shadow:   0 3px 0 darken($color, 14%),
         0 4px 0 darken         


        

Answer 1

@mixin threedshadow($color, $depth) {
  $all: ();
  @for $i from 1 through $depth {
    $all: append($all, append($i*1px $i*1px 0, darken($color, $i+14%)), comma);
  $all: append($all, 3px 8px 15px rgba(0,0,0,.1), comma);
  $all: append($all, 3px 8px 5px rgba(0,0,0,.3));
  text-shadow: $all
  }
}

h1 {
  @include threedshadow(#fff, 5);
}

You were having a similar but not identical problem that I was, the trick is to save the values for text-shadow in a variable outside the @for loop, and then append() them on with a comma.

You may also want to tweak the shadow that you left outside of the loop in your example so that it matches up with the $depth.

Demo