Easy css vendor prefix mixin for SASS

on under developer
1 minute read

Out Of Date Warning

This article was published on 18/05/2012, this means the content may be out of date or no longer relevant.
You should verify that the technical information in this article is still up to date before relying upon it for your own purposes.

With Sass, one of the aspiring preprocessors for CSS, one can easily automate menial tasks with mixins (user defined functions for css). For example, one common task ist to define one css-attribute in all vendor-specific prefixes (-moz, -webkit, -o, -ms) until that feature becomes css standard.

Besides the common known border-radius, box-shadow etc. there is the really pretty hyphens, which allows browsers to hyphenate words, which makes justified alignment much more useful. This can easily be covered by a general Sass-mixin:

= vendor-prefix($name, $argument)
  -webkit-#{$name}: #{$argument}
  -ms-#{$name}: #{$argument}
  -moz-#{$name}: #{$argument}
  -o-#{$name}: #{$argument}
  #{$name}: #{$argument}

//Calling  with
p
  +vendor-prefix(hyphens, auto)

or in scss

@mixin vendor-prefix($name, $argument) {
  -webkit-#{$name}: #{$argument};
  -ms-#{$name}: #{$argument};
  -moz-#{$name}: #{$argument};
  -o-#{$name}: #{$argument};
  #{$name}: #{$argument};
}
p {
  @include vendor-prefix(hyphens, auto)
}