
Browser Prefix SCSS Mixin
Prefix Mixins
@mixin prefix($property, $value, $vendors: webkit moz ms o) { @if $vendors { @each $vendor in $vendors { #{"-" + $vendor + "-" + $property}: #{$value}; } } #{$property}: #{$value}; } @mixin prefix-appearance($value){ @include prefix(appearance, $value, moz webkit); } @mixin prefix-box-shadow($value){ @include prefix(box-shadow, $value, webkit moz); }
Example 1: apperance
Appling appearance none in SCSS
form select { @include prefix-appearance (none); }
Results in CSS
form select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
Example 2: box shadow
Applying the box shadow in SCSS
form textarea { @include prefix-box-shadow ( 0 -3px rgba(0, 0, 0, 0.1) ); }
Results in CSS
form textarea { -moz-box-shadow: 0 -3px rgba(0, 0, 0, 0.1) inset; -webkit-box-shadow: 0 -3px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 -3px rgba(0, 0, 0, 0.1) inset; }