Automatically prefixing your code with Grunt

Browser-specific prefixes can make CSS3, and therefore, Sass code, complex and more difficult to maintain. Mixins (prebuilt), such as Compass, offer you the opportunity to write single line declarations for properties, such as gradients and shadows. The autoprefixer plugin can prefix your code automatically; it uses the Can I Use database (available at http://caniuse.com/) in order to find the prefixes that meet your requirements. In this recipe, you will not directly use the autoprefix plugin, which is depreciated now in favor of the grunt-postcss plugin.

Getting ready

The only requirement for this recipe is to have the grunt-postcss plugin installed and loaded in your Gruntfile.js file. If you have installed the grunt-autoprefix plugin in the Installing Grunt plugins recipe of this chapter, you can run the following commands in the root of your project:

npm remove grunt-autoprefixer --save-dev

In this recipe, you will use the CSS column layout...