Cross Browser Prefixes (use with Attribute or Value)

SCSS: Mixin - Cross Browser Prefix

//****************************************************/
//****************************************************/
//***                                              ***/
//***    CROSS BROWSER PREFIXES (cross-browser)    ***/
//***                                              ***/
//****************************************************/
//****************************************************/
// NOTE: You can use this either within a Mixin, or straight in the class!!




//CROSS BROWSER PREFIXES (aka crossbrowser)
$browserArray: (
   -webkit-,    // Safari & Chrome
   -khtml-,     // Konqueror HTML
   -moz-,       // Mozilla Firefox
   -ms-,        // Microsoft Internet Explorer & Edge
   -o-,         // Opera
   null         // NULL for Empty Prefix (Standard Declarations)
);



//**********************/
//*** USE IN A CLASS ***/
//**********************/
// .testAttribute {
//     @include prefix-attribute(background, linear-gradient(#000 0%, #FFF 100%));
// }
//
// .testValue {
//     @include prefix-value(background, linear-gradient(#000 0%, #FFF 100%));
// }
//**********************/
//*** CSS OUTPUT ***/
//**********************/
// .testAttribute {
//     -webkit-background: linear-gradient(#000 0%, #FFF 100%);
//     -khtml-background: linear-gradient(#000 0%, #FFF 100%);
//     -moz-background: linear-gradient(#000 0%, #FFF 100%);
//     -ms-background: linear-gradient(#000 0%, #FFF 100%);
//     -o-background: linear-gradient(#000 0%, #FFF 100%);
//     background: linear-gradient(#000 0%, #FFF 100%);
// }
//
// .testValue {
//     background: -webkit-linear-gradient(#000 0%, #FFF 100%);
//     background: -khtml-linear-gradient(#000 0%, #FFF 100%);
//     background: -moz-linear-gradient(#000 0%, #FFF 100%);
//     background: -ms-linear-gradient(#000 0%, #FFF 100%);
//     background: -o-linear-gradient(#000 0%, #FFF 100%);
//     background: linear-gradient(#000 0%, #FFF 100%);
// }




//**********************/
//*** USE IN A MIXIN ***/
//**********************/
// @mixin linear-gradient($gradient...) {
//     @include prefix-value(background, linear-gradient(#{$gradient}) );
// }
//************************/
//*** CLASS USES MIXIN ***/
//************************/
// .testMixin {
//     @include linear-gradient(#000 0%, #FFF 100%);
// }
//**********************/
//*** CSS OUTPUT ***/
//**********************/
// .testMixin {
//     background: -webkit-linear-gradient(#000 0%, #FFF 100%);
//     background: -khtml-linear-gradient(#000 0%, #FFF 100%);
//     background: -moz-linear-gradient(#000 0%, #FFF 100%);
//     background: -ms-linear-gradient(#000 0%, #FFF 100%);
//     background: -o-linear-gradient(#000 0%, #FFF 100%);
//     background: linear-gradient(#000 0%, #FFF 100%);
// }




//*********************************/
//*** MULTI-VALUE ARRAY EXAMPLE ***/
//*********************************/
// NOTE: You can even use this with a muli-value array
//
//*********************************/
//*** MIXIN ***/
//*********************************/
// @mixin box-shadow-border($pos-width,$neg-width,$b-color) {
//     @include prefix-attribute(box-shadow,
//         (
//             $pos-width $pos-width 0px $b-color,
//             $neg-width $neg-width 0px $b-color,
//             $pos-width $neg-width 0px $b-color,
//             $neg-width $pos-width 0px $b-color,
//             $pos-width        0px 0px $b-color,
//             $neg-width 		  0px 0px $b-color,
//             0px $pos-width 0px $b-color,
//             0px $neg-width 0px $b-color
//         )
//     );
// }
//*********************************/
//*** CLASS USING MIXIN ***/
//*********************************/
// .testBoxShadowBorder {
//     @include box-shadow-border(5px, 10px, #ddd);
// }
//*********************************/
//*** OUTPUT ***/
//*********************************/
// .testBoxShadowBorder {
//     -webkit-box-shadow: 5px 5px 0px #ddd, 10px 10px 0px #ddd, 5px 10px 0px #ddd, 10px 5px 0px #ddd, 5px 0px 0px #ddd, 10px 0px 0px #ddd, 0px 5px 0px #ddd, 0px 10px 0px #ddd;
//     -khtml-box-shadow: 5px 5px 0px #ddd, 10px 10px 0px #ddd, 5px 10px 0px #ddd, 10px 5px 0px #ddd, 5px 0px 0px #ddd, 10px 0px 0px #ddd, 0px 5px 0px #ddd, 0px 10px 0px #ddd;
//     -moz-box-shadow: 5px 5px 0px #ddd, 10px 10px 0px #ddd, 5px 10px 0px #ddd, 10px 5px 0px #ddd, 5px 0px 0px #ddd, 10px 0px 0px #ddd, 0px 5px 0px #ddd, 0px 10px 0px #ddd;
//     -ms-box-shadow: 5px 5px 0px #ddd, 10px 10px 0px #ddd, 5px 10px 0px #ddd, 10px 5px 0px #ddd, 5px 0px 0px #ddd, 10px 0px 0px #ddd, 0px 5px 0px #ddd, 0px 10px 0px #ddd;
//     -o-box-shadow: 5px 5px 0px #ddd, 10px 10px 0px #ddd, 5px 10px 0px #ddd, 10px 5px 0px #ddd, 5px 0px 0px #ddd, 10px 0px 0px #ddd, 0px 5px 0px #ddd, 0px 10px 0px #ddd;
//     box-shadow: 5px 5px 0px #ddd, 10px 10px 0px #ddd, 5px 10px 0px #ddd, 10px 5px 0px #ddd, 5px 0px 0px #ddd, 10px 0px 0px #ddd, 0px 5px 0px #ddd, 0px 10px 0px #ddd;
// }




//*******************************/
//*** CROSS BROWSER-ATTRIBUTE ***/
//*******************************/
// NOTE: When the ATTRIBUTE needs the cross-browser prefix
@mixin prefix-attribute($attribute, $value) {
    @each $browser in $browserArray {
        #{$browser}#{$attribute}: #{$value};
    }
}




//***************************/
//*** CROSS BROWSER-VALUE ***/
//***************************/
// NOTE: When the VALUE needs the cross-browser prefix
@mixin prefix-value($attribute, $value) {
    @each $browser in $browserArray {
        #{$attribute}: #{$browser}#{$value};
    }
}




//*** SEARCH KEYWORDS:
// crossbrowser, cross-browser, browser-prefixes, prefixes, all-browsers