What is the easiest way to deal with vendor prefixes with SASS/Compass?

[nixnerd]

The SASS website has this little snippet:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
}

However, this only applies toborder-radius. I read somewhere that Compass can automatically prefix everything. Is this possible? If so, how is it done?

[__]

have a look at the docs.

You could certainly make your own mixin that accepts the property name as an arg. In fact, that’s what Bourbon does:

// generic "prefixer" mixin:

$prefix-for-webkit: true !default
$prefix-for-mozilla: true !default
$prefix-for-microsoft: true !default
$prefix-for-opera: true !default
$prefix-for-spec: true !default

=prefixer($property, $value, $prefixes)
  @each $prefix in $prefixes
    @if $prefix == webkit
      @if $prefix-for-webkit
        -webkit-#{$property}: $value
    @else if $prefix == moz
      @if $prefix-for-mozilla
        -moz-#{$property}: $value
    @else if $prefix == ms
      @if $prefix-for-microsoft
        -ms-#{$property}: $value
    @else if $prefix == o
      @if $prefix-for-opera
        -o-#{$property}: $value
    @else if $prefix == spec
      @if $prefix-for-spec
        #{$property}: $value
    @else
      @warn "Unrecognized prefix: #{$prefix}"

[Author]

Posts