Vendor Prefixing

Fundamental 32 views
+1
0 Flares 0 Flares ×

A great use of @mixin is to use it for vendor prefixing. I don’t mean you need to add it to all CSS3 properties because there are some CSS3 properties that you don’t have to add vender prefix anymore like border-radius.

Define @mixin

@mixin css3($property, $value) {
     @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
          #{$prefix}#{$property}: $value;
     }
}

Usage with @include

.box {
     @include css3(transition, 0.5s);
}

Output

.box {
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

For Reference:

Useful Sass mixin Snippets

Provided by: Web Creator Box
Tagged with:
Posted in Sass

Discuss:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

No Trackbacks.

Login

Register | Lost your password?
0 Flares Twitter 0 Facebook 0 Google+ 0 0 Flares ×