Automatically add browser prefixes to CSS styles using SCSS

When a browser implements a new property, value, or selector, and this feature is not in the candidate Recommendation standard State, the attribute is preceded by a prefix for its rendering engine recognition.

The browser uses prefixes to try out some new properties, values, and selectors, even if they are not finalized-a good test method that can be modified or redefined if necessary. If the browser is directly using standard attributes, they will be locked directly into the implementation of the feature and not easily changed.

Development this may immediately use the prefix attribute, and will always expect it to maintain the same performance no longer changing. If the browser changes this property later, either because its implementation is defective, or because the specification itself has changed, all existing sites that use this attribute may be at risk of being challenged. In addition to this locking problem, this approach can also force other browsers and the web to adapt its implementation.

1. Use Scss to add a browser prefix to the style, not much to say, directly on the code.

@mixin prefix($stylename, $value, $options: webkit moz o ms) {    #{$stylename}: $value;    @each $option in $options {        @if $option == webkit {            -webkit-#{$stylename}: $value;        }        @else if $option == moz {            -moz-#{$stylename}: #{$value};        }        @else if $option == o {            -o-#{$stylename}: #{$value};        }        @else if $option == ms {            -ms-#{$stylename}: #{$value};        }    }}.test {    @include prefix(background, blue);}

Post-compilation results:

.test {  background: blue;  -webkit-background: blue;  -moz-background: blue;  -o-background: blue;  -ms-background: blue; }

Ps:

1. Obviously, the above code is $stylename wrapped up in #{}.
   
2. $options in formal parameters can be [WebKit moz o ms], but cannot be written as an array, which may be the reason for SCSS syntax.
3. $option have a default value, so you can specify which browser prefixes to generate by using the@include prefix(background, blue, webkit moz)

How do you write some style values that are compatible? Or when you add a property value instead of a property, how do you write it?

For example background , when the value is a gradient, there is compatibility, and the values of background are new, so it should be written as shown.

At this point, you only need to:

.test {    // @include prefix(background, linear-gradient())    皮一下，很开森。    其实这种情况下，用这个封装的前缀就不太合适了，还是老老实实分开单独写吧，或者封装一个background linear-gradient的mixin。    因为这里liner-gradient值是不一样的，并不只是前缀的问题。}

Written left , to right in this form, there is a compatibility problem between browsers, so we can rewrite 90deg this form.

2. Encapsulate an animated Prefix-frames

@mixin prefix-keyframes($name, $options: [webkit moz o ms]) {    @keyframes #{$name} {        @content;    }    @each $option in $options {        @if $option == webkit {            @-webkit-keyframes #{$name} {                @content;            }        }        @else if $option == moz {            @-moz-keyframes #{$name} {                @content;            }        }        @else if $option == o {            @-o-keyframes #{$name} {                @content;            }        }        @else if $option == ms {            @-ms-keyframes #{$name} {                @content;            }        }    }}@include prefix-keyframes(colorchange) {    from {        color: red;    }    to {        color: black;    }};

Parsed CSS

@keyframes colorchange {  from {    color: red; }  to {    color: black; } }@-webkit-keyframes colorchange {  from {    color: red; }  to {    color: black; } }@-moz-keyframes colorchange {  from {    color: red; }  to {    color: black; } }@-o-keyframes colorchange {  from {    color: red; }  to {    color: black; } }@-ms-keyframes colorchange {  from {    color: red; }  to {    color: black; } }

3. Share some of my favorite mixin

Float @mixin float ($f: left) {float: $f;}.    Test {@include float (); @include float (right);}    Clear floating @mixin Clearfix () {zoom:1;        &:after {content: ';        Display:block;    Clear:both; }}.test {@include clearfix ();}    Triangular @mixin triangle ($size, $dir, $color) {display:block;    width:0;    height:0;    Border: $size solid transparent; border-#{$dir}: $size solid #{$color};}. Test {@include triangle (20px, left, red);}    Set width height @mixin size ($w, $h: Auto) {width: $w; Height: $h;}.    Test {@include size (200px); @include size (200px, 200px);}    header row, redundant with ellipsis @mixin Text-overflow {max-width:100%;    Overflow:hidden;    Text-overflow:ellipsis; White-space:nowrap;}    Text does not change line @mixin word-break {word-break:break-all;    Word-wrap:break-word; White-space:normal;}    Fillet @mixin Border-radius ($radius) {-webkit-border-radius: $radius;    -moz-border-radius: $radius;    Border-radius: $radius;    It's more perfect to write like this. @include PRefix (Border-radius, $radius); }

There is only one real heroism in the world, that is, after recognizing the truth of life, still love life--Romain Rolland

Automatically add browser prefixes to CSS styles using SCSS