Google Material Design Shadow SASS

google-material-shadow.sass

//
// Google Material Design Shadow
// Ref: http://stackoverflow.com/questions/30533055/calculating-shadow-values-for-all-material-design-elevations
//
=shadow($dp)
  @if $dp == 0
    box-shadow : none

  @else
    $ambientY     : $dp
    $ambientBlur  : if($dp == 1, 3, $dp * 2)
    $ambientAlpha : ($dp + 10 + ($dp / 9.38)) / 100
    $ambient      : 0 $ambientY+px $ambientBlur+px rgba(0, 0, 0, $ambientAlpha)

    $directY      : if($dp < 10, if($dp % 2 == 0 , $dp - (($dp / 2) - 1) , ($dp - (($dp - 1) / 2))) , $dp - 4)
    $directBlur   : if($dp == 1, 3, $dp * 2)
    $directAlpha  : (24 - round($dp / 10)) / 100
    $direct       : 0 $directY+px $directBlur+px rgba(0, 0, 0, $directAlpha)

    box-shadow : $ambient, $direct