├── readme.md
└── scss
    └── _shade.scss


/readme.md:
--------------------------------------------------------------------------------
1 | ![Sassmatic Logo](http://darbybrown.com/img/shade.jpg)
2 | 
3 | 
4 | The Ultimate Shadow Mixin
5 | 
6 | 
7 | [Demo and Usage](http://codepen.io/hugo/full/xzjGB) 


--------------------------------------------------------------------------------
/scss/_shade.scss:
--------------------------------------------------------------------------------
 1 | @mixin shade($type, $color: #3498db, $depth: 20, $angle: 135deg, $long: false, $fade: false) {             
 2 |           $angle: ($angle - 90);             
 3 |           $x: 1.5 * cos($angle) + 0px;  
 4 |           $y: 1.5 * sin($angle) + 0px;  
 5 |           $darken: (lightness($color)/$depth)/2;
 6 |           $opacify: 0; 
 7 |           $shadow: ();  
 8 |             
 9 |           @if $long == true{              
10 |             $darken:0;
11 |           }  
12 |             
13 |           @if $fade == true {
14 |               $opacify: (opacity($color)/$depth) ;
15 |               @include translateZ(0); 
16 |             }
17 |           
18 |           @for $i from 1 through $depth {
19 |             $shadow: $shadow, $i*$x $i*$y 0 hsla(hue($color) , saturation($color), (lightness($color) - ($i * $darken)), 1 - ($i * $opacify));     
20 |           }       
21 |           #{$type}-shadow: $shadow;
22 |   }
23 | 


--------------------------------------------------------------------------------