Create Multiple Box Shadow classnames to use throughout your project by simply creating a new variable and adding it to the GlobalShadowsArray

SCSS: Multiple Box Shadows from Array

// Create Multiple Box Shadow classnames to use throughout your project by simply creating a new variable and adding it to the GlobalShadowsArray
// 1. Create a new shadow variable in [BOX SHADOW VARIABLES]. (ie. $shadow-5)
// 2. Add the shadow name and shadow variable to the $GlobalShadowsArray. (ie. shadow-5 $shadow-5)
// 3. Run scss compiler :)
//
// *** NOTE: This creates both a "shadowName" classname, and a "shadowName--inset" classname
//
// EXAMPLES TO USE:
//  <div class="shadow-1">a normal div with a shadow</div>
//  <div class="shadow-1--inset">a normal div with a shadow inset</div>



//****************************/
//*** BOX SHADOW VARIABLES ***/
//****************************/
// 1. Create a new shadow variable here. (ie. $shadow-5)
$shadow-1: #{0 4px 8px -4px rgba(0, 0, 0, .3)};
$shadow-2: #{0px 2px 8px rgba(0,0,0,.3)};
$shadow-3: #{0px 1px 2px rgba(0,0,0,.3)};
$shadow-4: #{0 30px 50px -15px rgba(0,0,0,.35)};

//*************************/
//*** All Shadows Array ***/
//*************************/
// 2. Add the shadow name and shadow variable to the array here. (ie. shadow-5 $shadow-5)
$GlobalShadowsArray: (
    //shadowName //shadowVariable
    shadow-1 $shadow-1,
    shadow-2 $shadow-2,
    shadow-3 $shadow-3,
    shadow-4 $shadow-4
);

//*************/
//*** MIXIN ***/
//*************/
@mixin box-shadow($shadow...) {
    -ms-box-shadow:		$shadow;
    -moz-box-shadow:	$shadow;
    -o-box-shadow:		$shadow;
    -webkit-box-shadow:	$shadow;
    -khtml-box-shadow:	$shadow;
    box-shadow:			$shadow;
}

//*********************************/
//*** CREATES SHADOW CLASSNAMES ***/
//*********************************/
@each $shadowName, $shadowVariable in $GlobalShadowsArray {
    .#{$shadowName} {
        @include box-shadow($shadowVariable);
        &--inset {
            @include box-shadow(inset $shadowVariable);
        }
    }
}


//**************/
//*** OUTPUT ***/
//**************/
// .shadow-1 {
//     -ms-box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.3);
//     -moz-box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.3);
//     -o-box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.3);
//     -webkit-box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.3);
//     -khtml-box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.3);
//     box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.3);
// }
// .shadow-1--inset {
//     -ms-box-shadow: inset 0 4px 8px -4px rgba(0, 0, 0, 0.3);
//     -moz-box-shadow: inset 0 4px 8px -4px rgba(0, 0, 0, 0.3);
//     -o-box-shadow: inset 0 4px 8px -4px rgba(0, 0, 0, 0.3);
//     -webkit-box-shadow: inset 0 4px 8px -4px rgba(0, 0, 0, 0.3);
//     -khtml-box-shadow: inset 0 4px 8px -4px rgba(0, 0, 0, 0.3);
//     box-shadow: inset 0 4px 8px -4px rgba(0, 0, 0, 0.3);
// }
// 
// .shadow-2 {
//     -ms-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
//     -moz-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
//     -o-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
//     -webkit-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
//     -khtml-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
//     box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
// }
// .shadow-2--inset {
//     -ms-box-shadow: inset 0px 2px 8px rgba(0, 0, 0, 0.3);
//     -moz-box-shadow: inset 0px 2px 8px rgba(0, 0, 0, 0.3);
//     -o-box-shadow: inset 0px 2px 8px rgba(0, 0, 0, 0.3);
//     -webkit-box-shadow: inset 0px 2px 8px rgba(0, 0, 0, 0.3);
//     -khtml-box-shadow: inset 0px 2px 8px rgba(0, 0, 0, 0.3);
//     box-shadow: inset 0px 2px 8px rgba(0, 0, 0, 0.3);
// }
// 
// .shadow-3 {
//     -ms-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
//     -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
//     -o-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
//     -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
//     -khtml-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
//     box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
// }
// .shadow-3--inset {
//     -ms-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.3);
//     -moz-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.3);
//     -o-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.3);
//     -webkit-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.3);
//     -khtml-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.3);
//     box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.3);
// }
// 
// .shadow-4 {
//     -ms-box-shadow: 0 30px 50px -15px rgba(0, 0, 0, 0.35);
//     -moz-box-shadow: 0 30px 50px -15px rgba(0, 0, 0, 0.35);
//     -o-box-shadow: 0 30px 50px -15px rgba(0, 0, 0, 0.35);
//     -webkit-box-shadow: 0 30px 50px -15px rgba(0, 0, 0, 0.35);
//     -khtml-box-shadow: 0 30px 50px -15px rgba(0, 0, 0, 0.35);
//     box-shadow: 0 30px 50px -15px rgba(0, 0, 0, 0.35);
// }
// .shadow-4--inset {
//     -ms-box-shadow: inset 0 30px 50px -15px rgba(0, 0, 0, 0.35);
//     -moz-box-shadow: inset 0 30px 50px -15px rgba(0, 0, 0, 0.35);
//     -o-box-shadow: inset 0 30px 50px -15px rgba(0, 0, 0, 0.35);
//     -webkit-box-shadow: inset 0 30px 50px -15px rgba(0, 0, 0, 0.35);
//     -khtml-box-shadow: inset 0 30px 50px -15px rgba(0, 0, 0, 0.35);
//     box-shadow: inset 0 30px 50px -15px rgba(0, 0, 0, 0.35);
// }