3d.scss

@function shadow-3d($thickness-shadow-color, $splash-shadow-color, $thickness, $angle: 0) {
  $shadows: compact();
  @if unit($thickness) != px { @warn "$thickness must be passed as a pixel value, eg: 5px." };
  @for $i from 1 through $thickness/1px {
    $shadows: append($shadows, 0 1px * $i 0 adjust-color($thickness-shadow-color, $lightness: -3.3% * ($i - 1)));
  }
  @each $values in (
    0 $thickness + 1px 1px 0.1,
    0 0 $thickness + 5px 0.3,
    0 abs($thickness - 2px) 5px 0.2,
    $angle abs($thickness * 2) 10px 0.25,
    round($angle * 1.5) abs($thickness * 2) 10px 0.2,
    round($angle * 2.5) $thickness * 4 20px 0.15) {
    $shadows: append($shadows, nth($values, 1) nth($values, 2) nth($values, 3) rgba($splash-shadow-color, nth($values, 4)));
  }

  @return $shadows;
}
@mixin shadow-3d-text($text-color: #fff, $background-color: false, $thickness: 5px, $angle: 0, $thickness-shadow-color: adjust-color($text-color, $lightness: -20%), $splash-shadow-color: #000){
  color: $text-color;
  @if $background-color {
    $thickness-shadow-color: scale-color($background-color, $lightness: 30%, $saturation: -50%)
  }
  text-shadow: shadow-3d($thickness-shadow-color, $splash-shadow-color, $thickness, $angle);
}
$body-bg: #8f8bea;
body {
  background: $body-bg;
  text-align: center;
}
h1 {
  font: bold 100px "Helvetica Neue", Helvetica;
  @include shadow-3d-text(#fff, $body-bg, $thickness: 5px, $angle: -4px);
}