Using Autoprefixer with Jekyll

Autoprefixer is a tool that handles the addition of vendor prefixes for CSS rules - allowing you to just write pure CSS when developing. It is easy to integrate with Jekyll by performing the following steps:

Add the following to your Gemfile:

gem 'jekyll-assets'
gem 'autoprefixer-rails'

Add the following to your _config.yml:

gems: [jekyll-assets, autoprefixer-rails]

Ensuring all your stylesheets are stored under "_assets/stylesheets/", include your CSS files using the Jekyll-Assets method like so (replace style.css with your stylesheet name):

{% stylesheet style.css %}

The end result generated will be something like this:

<link rel="stylesheet" href="/assets/syntax-c1efd1997ea8e6d3cb00d14124dd6de8.css">

You can check if the process has been successful by opening the generated stylesheets in the _site/assets/ folder, you should see that prefixes have been added for the appropriate features.

Done.