I've looked at Blueprint, Less, and SCSS and none of them appear to do what I want. I find this difficult to believe because handling vendor prefixes is the most frustrating part of writing CSS, so it would appear to be to be the first problem anyone who writes a CSS framework ought to address.

I want to know, is there a framework (or rails gem) that I can use, that allows me to write border-radius:5px and then let's me assume that it will create a rule with all the proper vendor prefixes?

Thanks

• css
• css3
• less
• sass

You can actually do this quite easily with a LESS Mixin - basically you write it once and from there on out you apply it with one line. Like this:

// Border Radius
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

Then you symply do this one-liner where you need a border radius:

.classname {
  .border-radius(5px);
}

If you are not ready for LESS, then you could just process your code through Prefixr - it generates the browser prefixes for you (then you have to copy paste the code back into your file).

you can use that: http://sjevsejev.blogspot.com/2012/07/lessjs-function-generates-prefixes-for.html

then it would be enough to use:

.pf('transition','all 1s ease-in-out');
.pf('border-radius',3px);
.pf('box-shadow','2px 2px 5px 0 rgba(0,0,0,.6)');
.pf('flex', 1);