thoughtbot/bourbon — pull request #90 by renaudleo (2012-04-12 14:00:38+00:00)
Title: Use global prefixer mixin instead of hand-written prefixes everywhere

I added a a global prefixer mixin to avoid repeating vendor prefixes in almost each and every mixin. It is inspired from a similar feature in Compass, although a bit simpler since we don't want no configuration file in Bourbon.

It goes like this :

``` scss
@mixin prefixer ($property, $value,
$moz: true,
$webkit: true,
$o: false,
$ms: false,
$spec: true) {
@if $moz { -moz-#{$property}: $value; }
@if $webkit { -webkit-#{$property}: $value; }
@if $o { -o-#{$property}: $value; }
@if $ms { -ms-#{$property}: $value; }
@if $spec { #{$property}: $value; }
}

```

and gives us this kind of improvements :

``` scss
//Before
@mixin border-radius ($radii) {
-webkit-border-radius: $radii;
-moz-border-radius: $radii;
border-radius: $radii;
}
//After
@mixin border-radius ($radii) {
@include prefixer(border-radius, $radii);
}
```

I chose to have `-moz` and `-webkit` as default prefixes since, as of now, they are the ones used virtually everywhere, but that could be debated.

As each argument is a boolean, if you want to have `-moz`, `-webkit`, and `-ms`, but not opera, you could go with either of these two syntaxes :

``` scss
//Standard true/false
@include prefixer(user-select, $arg, true, true, false, true);

//Using SASS not operator
@include prefixer(user-select, $arg, moz, webkit, not o, ms);
```

I chose to go with the second syntax, as it's a lot more human comprehensible than a bunch of comma separated true/false.

Let me know what you think!