As some of you may know, several months ago, I built a helpful tool (out of necessity) that dynamically creates all of the various required prefixes for the new CSS3 properties. Check it out if you haven’t already; you can even use it in your favorite code editor, like Sublime Text 2.
If you prefer to use a CSS preprocessor, like Sass, Less, or Stylus, you might be under the impression that you can’t use Prefixr; but that’s not the case at all. One of my favorite Mac apps is called LiveReload. In addition to auto-refreshing your browser when you make changes, it also will automatically compile Sass, Less, Stylus, CoffeeScript, Slim, etc.
Even better, it allows us to execute shell scripts after compilation. We can use this to take the generated CSS, run it through the Prefixr service, and save the returned, prefixes results.
To Do So…
Open LiveReload, check “Run a custom command after processing changes”, and paste:
css="`cat style.css`" && curl -sSd css="$css" http://prefixr.com/api/index.php > style.css
Make sure that you change style.css to the name of your generated stylesheet. That’s it! You’re done.
