Easy css vendor prefix mixin for SASS

18th May 2012 – 252 words

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