Last Updated: February 25, 2016
·
6.856K
· chinchang

Multiple text-shadow function in SASS

I wrote this function a few days back, trying to create the famous 'I amsterdam' structure in pure CSS.

Here is what it looks like in CSS btw:

Picture

Check out the code on CSSDeck: http://cssdeck.com/labs/full/iamsterdam

This required mutliple text-shadow on the text with color gradually getting dark. The text contains around ~25 text-shadows of varying colors, so obviously vanilla CSS is not the best choice here. SASS FTW!

Here is the function that I created:

// n is number of shadows required
@function multiple-text-shadow ($n, $color) {
  $value: '-1px 0 0 #{$color}';
  @for $i from 2 through $n {
    $value: '#{$value} , #{$i * -1}px 0 0 ' + darken($color, $i);
  }

  @return unquote($value);
}

You use it simply as:

.my-text {
  text-shadow: multiple-text-shadow(20, #F00);
}

I learnt a lot while hacking this, specially about functions, concatenation, unquoting, loops etc in SASS.