This CSS has been beaten to within an inch of death. It’s too big, unreadable, and completely impractical.
Sass should not be used to such ill-conceived ends.

But its fun, and looks “cool”.

WTF

I wanted to find out if I could make Sass generate a pile of shadows for me. I thought maybe I could trick it into drawing shadows in funny shapes. For the first step I just needed to just create a simple long diagonal shadow. The trick here is that I’m building a string to be used as a shadow one iteration at a time using the @for loop, and then outputting whole generated shadow. I’m using Compass’s text-shadow mixin to smooth out any browser prefixes.

@function wtf() {
  $output: '';
  $color: rgba($red, 0.5);
  $end: 25;
  @for $i from 1 through $end {
     $output: $output + '#{$color} #{$i}px #{$i}px 2px';
     @if $i < $end {
       $output: $output + ', ';
     }
  }
  @return unquote($output);
}

.ex1 h3 {
  @include text-shadow(wtf());
}

OMG

Next I pulled out Compass’ trig functions to make circle shadows. I barely understand the math, but I like playing with it.

@function omg() {
  $output: '';
  $end: 25;
  $radius: 50;
  @for $i from 1 through $end {
    $color: rgba($red, ($i / $end));
    $position: 360 / $end * $i;
    $cos: cos($position * (pi() / 180));
    $x-position: $radius * $cos;
    $sin: sin($position * (pi() / 180));
    $y-position: $radius * $sin;
     $output: $output + '#{$color} #{$x-position}px #{$y-position}px 2px';
     @if $i < $end {
       $output: $output + ', ';
     }
  }
  @return unquote($output);
}

.ex2 h3 {
  @include text-shadow(omg());
}

OMG-WTF

Why stop there? If I mess around with the variables I can make interesting patterns.

@function omgwtf() {
  $output: '';
  $end: 100;
  $radius: 40;
  @for $i from 1 through $end {
    $color: rgba($red, ($i / $end));
    $position: 360 / $end * $i;
    $cos: cos($position * (pi() / 180));
    $x-position: $radius * $cos;
    $sin: sin($position * (pi() / 15));
    $y-position: $radius * $sin;
     $output: $output + '#{$color} #{$x-position}px #{$y-position}px 2px';
     @if $i < $end {
       $output: $output + ', ';
     }
  }
  @return unquote($output);
}

.ex3 h3 {
  @include text-shadow(omgwtf());
}

OMG WTF BBQ

Hey, why not try to do something less circular, and maybe play with the color?

@function omgwtfbbq() {
  $output: '';
  $end: 100;
  $radius: 80;
  @for $i from 1 through $end {
    $color: rgba($red, ($i / $end));
    $color: adjust-hue($color, $i / 1.618);
    $position: 90 / $end * $i;
    $cos: cos($position * (pi() / 60));
    $x-position: $radius * $cos;
    $sin: sin($position * (pi() / -45));
    $y-position: $radius * $sin;
    $output: $output + '#{$color} #{$x-position}px #{$y-position}px 2px';
     @if $i < $end {
       $output: $output + ', ';
     }
  }
  @return unquote($output);
}

.ex4 h3 {
  @include text-shadow(omgwtfbbq());
}

MOTHER EFFING TEXT SHADOW II

Now it’s your turn. You know Sass (or would like to) and you want to terrible, dirty things with it. This Compass Extension is for you.

@function sassy-text-shadow($color, $iterations, $rad, $deg, $cos-i, $sin-i, $color-multiplier) {
  $output: '';
  $end: $iterations;
  $radius: $rad;
  @for $i from 1 through $end {
    $color: rgba($color, ($i / $end));
    $color: adjust-hue($color, $i * $color-multiplier);
    $position: $deg / $end * $i;
    $cos: cos($position * (pi() / $cos-i));
    $x-position: $radius * $cos;
    $sin: sin($position * (pi() / $sin-i));
    $y-position: $radius * $sin;
    $spread: $i / ($iterations / 10);
    $output: $output + '#{$color} #{$x-position}px #{$y-position}px px';
     @if $i < $end {
       $output: $output + ', ';
     }
  }
  @return unquote($output);
}

.ex5 h3 {
  @include text-shadow(sassy-text-shadow($red, 100, 80, 120, 90, -45, 0.09));
}

*

There shouldn’t be more. I’d like to tell you that a masked gunman made me make a Lorenz Attractor in Sass. But the truth is that it was just bad judgement. For the love of all that is good don’t use this anywhere. The CSS is just out of control. View source at your peril.

@function lmao($orig-color, $iterations, $sx, $sy, $sz) {
  $output: '';
  $end: $iterations;

  $x0: $sx / 10;
  $y0: $sy;
  $z0: $sz;
  $h: 0.01;
  $a: 10.0;
  $b: 28.0;
  $c: 8.0 / 3.0;

  @for $i from 0 through $end {
    $x1: $x0 + $h * $a * ($y0 - $x0);
    $y1: $y0 + $h * ($x0 * ($b - $z0) - $y0);
    $z1: $z0 + $h * ($x0 * $y0 - $c * $z0);

    $xval: $x1 * -50;
    $yval: $y1 * -20;
    $spread: $z1 * .1;

    $color: rgba($orig-color, ($i / $end));
    $color: adjust-hue($color, $z1);

    $output: $output + '#{$color} #{$xval}px #{$yval}px #{$spread}px';
     @if $i < $end {
       $output: $output + ', ';
     }

     $x0: $x1;
     $y0: $y1;
     $z0: $z1;

  }

  @return unquote($output);
}

.ex6 h3 {
  @include text-shadow(lmao($red, 5000, 6, 4, 6));
}