I’m quite pleased. I managed to cut down Cover’s stylesheet from 72K to 63K, and it’s all because of Autoprefixer.
When I first moved from plain ol’ CSS to Sass, I created some mixins to handle vendor prefixes. I’d read about using Compass and other frameworks to automatically build the necessary vendor prefixed styles, but I never got around to implementing it for Cover.
A couple weeks ago, I posted a survey to the Google+ Sass community, asking how I should handle vendor prefixes. Everyone who answered said not to use a framework, but to use Autoprefixer instead.
Instead of being part of Sass, which is a preprocessor, Autoprefixer is a postprocessor. You feed it a CSS file without vendor prefixes — whether written by hand or one generated by a preprocessor like Sass, Less, or Stylus — and it parses and outputs a CSS file with vendor prefixes added.
Since I use Grunt in Cover’s build process, it was a simple matter of including grunt-autoprefixer into the workflow.
So after running this to install grunt-autoprefixer
(which updates package.json
as necessary after downloading the plugin’s files):
npm install grunt-autoprefixer --save-dev
And adding this line into the load tasks block in GruntFile.js
(necessary for actually running the task, of course):
grunt.loadNpmTasks('grunt-autoprefixer');
I added this block inside Grunt’s initConfig()
method:
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// ...
autoprefixer: {
dist: {
files: {
'style.css': 'style.css'
}
}
},
// ...
});
Since Sass builds to a CSS file, I have Autoprefixer set up to output to that same file. (Some setups build to an intermediary file, like to ‘/build/style.css’, which the plugin would parse and output to the final destination.) But really, that’s it. I haven’t really played around with the options much. The default behavior (which is driven by the Can I Use database) is sufficient for my purposes.
Leave a Reply