We code the web

Is Compass dead?

For a long time I have been a dedicated user of the SASS+Compass stack. It is great not having to provide workarounds and fixes for each browser in your CSS. Compass mixins saved me a lot of trouble. So why ask the question in this title?

As a front-end developer I use Gulp a lot, but nothing is more annoying than an error in you Gulp build. On time my compass task kept failing for some reason and I started googling about it. I noticed a lot of articles where people actually ditched Compass for autoprefixer. Autoprefixer actually searches through your CSS files for rules that are not compatible with all browsers. Then it adds all the rules that are needed to make the rule work with all browsers. An example of a Gulp task with autoprefixer:

1
2
3
4
5
6
7
8
gulp.task('sass', function () {
return gulp.src('./src/main.scss')
.pipe(sass({
sourceMaps: true
})
.pipe(postcss([ autoprefixer({ browsers: ['last 2 version'] }) ]))
.pipe(gulp.dest('./dest'));
});

The task above would compile your main.scss to a main.css, pass the main.css file to autoprefixer, which will in his turn prefix/extend all of the cross browser incompatible rules. Note the ‘last 2 version’ string. You can actually define which browsers you want to support! For instance you could do:

1
2
3
4
.pipe(postcss([ autoprefixer({ browsers: ['ie 6 ie 7 chrome 40'] }) ]))
// No :( lets not support IE6 anymore!
.pipe(postcss([ autoprefixer({ browsers: ['last 3 version', > 10%] }) ]))
// This will support the last 3 versions of each major browser with a usage statistic of over 10%

So a lot of options and no more using compass mixins in your SASS, so instead of:

1
2
3
.class {
@include border-radius(10px);
}

You can now just:

1
2
3
.class {
border-radius: 10px;
}

Meaning that you can just write the native rules, so your code is not dependent on Compass or any other library anymore. On top of all this autoprefixer is also available for Visual Studio and various other environments.

This is not the whole story however, Compass actually does more. It adds some useful mixins for typography and image spriting. It is more of a SASS mixin library than just a prefixer Therefore the comparison is questionable, but most Compass users I encounter only use it for cross-browser support.

Compass is not actually dead, it offers a lot of cool functionality.But in a lot of cases I think the autoprefixer solution is more elegant en flexible. But in the end, use what ever you want!

Reference:

Related posts

Automating FTP deployment with Travis CI and Gulp

Continuous integration is an important subject, I cannot think of a development world without it. There are a lot of options for CI, but Travis is a nice and simple one. For personal projects it’s free with unlimited repo’s, perfect! However, it requires you to code your own build script. I had some trouble figuring out a good way to do FTP deployments. So, how do you upload files to FTP servers with Travis?

Using React with ES6 and Browserify

ECMAScript 6 is great! It gives us Javascript developers a long time longed for set of core functionalities like classes, imports and more. Browsers do not support most of the features yet, but we can use transpilers to be able to use ES6.

Faster CSS coding with Hayaku

Lately a good friend of mine showed me this plugin for Sublime Text called Hayaku. I had never heard of it so I asked him what it was. It’s like Emmet for CSS. Hey, I know Emmet, it makes writing HTML and CSS easier, so what’s this about?