Skip to content

Instantly share code, notes, and snippets.

@hergaiety

hergaiety/depth.scss

Created September 16, 2014 02:55
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save hergaiety/da5b1e8436ce2df210ab to your computer and use it in GitHub Desktop.
Save hergaiety/da5b1e8436ce2df210ab to your computer and use it in GitHub Desktop.
Download ZIP
Google Material Design Shadow SASS Mixin Helper
Raw
depth.scss
/**
* Google Material Design style card depth
* Can receive an int between -5 and 5 (negatives use inset shadows) ex: @include depth(5); @include depth(-3)
*/
@mixin depth($layer) {
@if $layer > 0 {
$inset: 0;
$offset: null;
} @else {
$inset: inset;
$offset: 1px;
$layer: $layer * -1;
}
box-shadow: $inset $offset 1px*($layer/2) 4px*$layer rgba(100, 100, 100, .2*$layer);
}
@nonameolsson
Copy link

Does this require Compass?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment