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;
}

Search the site


Address

123 Main Street
Town
City
P05T C0D3

Tel: 01234 567 899

Mob: 01234 567 899

Email: ben@gomopress.com


Copyright 2023. Blah blah blah Company Limited