material design elevation mixin concept

_box_shadow_offsets_helper.scss

/**
 * Box Shadow Offsets Helper
 *
 * helper to build a shadow offsets map based on a size value
 */

@function box-shadow-offsets($size) {
    @return (
        top: 0 $size,
        right: negative($size) 0,
        bottom: 0 negative($size),
        left: $size 0
    )
}

_math_helper.scss

/**
 * Elevate Helper
 *
 * helper to build a shadow offsets map based on a size value
 */
@function negative($number) {
    @return $number * -1;
}

elevate.scss

/**
 * elevate
 *
 * apply elevation box-shadows on components at varying levels based on their
 * `Z` axis visual level.
 *
 * $level:    Depth of the component to the page. Higher level = larger drop shadow spread
 * $light-source: Location from which component originates resulting in a shadow on the opposite edge
 *            EX. A 'top' modal will have a shadow starting at the "bottom" edge.
 * $color:    Color of drop-shadow
 */


@mixin elevate($level: 1, $light-source: top, $color: '#555') {
    // Level 
    @if ($level == 1) {
        $offsets: box-shadow-offsets(1px);

        box-shadow: #{map-get($offsets, $light-source)} 3px rgba($color, 0.12),
                    #{map-get($offsets, $light-source)} 2px rgba($color, 0.24);
    }

    // Level 2
    @if ($level == 2) {
        $offsets: box-shadow-offsets(3px);

        box-shadow: #{map-get($offsets, $light-source)} 6px rgba($color, 0.16),
                    #{map-get($offsets, $light-source)} 6px rgba($color, 0.23);
    }

    // Level 3
    @if ($level == 3) {
        $primary-offsets: box-shadow-offsets(10px);
        $secondary-offsets: box-shadow-offsets(6px);

        box-shadow: #{map-get($primary-offsets, $light-source)} 20px rgba($color, 0.19),
                    #{map-get($secondary-offsets, $light-source)} 6px rgba($color, 0.23);
    }

    // Level 4
    @if ($level == 4) {
        $primary-offsets: box-shadow-offsets(14px);
        $secondary-offsets: box-shadow-offsets(10px);

        box-shadow: #{map-get($primary-offsets, $light-source)} 28px rgba($color, 0.25),
                    #{map-get($secondary-offsets, $light-source)} 10px rgba($color, 0.22);
    }

    // Level 5
    @if ($level == 5) {
        $primary-offsets: box-shadow-offsets(19px);
        $secondary-offsets: box-shadow-offsets(15px);

        box-shadow: #{map-get($primary-offsets, $light-source)} 38px rgba($color, 0.30),
                    #{map-get($secondary-offsets, $light-source)} 12px rgba($color, 0.22);
    }
}