• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Compass Is Dead (To Me) Why I Am Removing Compass From My Workflow

Front End Development · September 8, 2014

Once upon a time Compass was an invaluable value add to any SASS project. Rather than looking up vendor prefixes all of the time or understanding the priority order, you could just include a Compass mixin and away you went. It was a great timesaving tool, but now the time has come to move on.

The one tool that I use nowadays is Autoprefixer. Basically what it will do is go through your CSS and add in vendor prefixes where required. This means you can write standard prefix-free CSS and not have to worry about finding fallback vendor prefixes or different syntax (I’m lookin at you Internet Explorer and Flexbox).

Times have changed. I no longer see the value is including Compass when I can write box-sizing and have all of the required prefixes and syntax added in for me. I am a firm believer that libraries like Compass actually create problem developers, people become reliant on the library and have no idea what the native equivalent looks like or its syntax.

This is the same problem I have with jQuery, it is useful, but if you don’t dig deeper to see what is happening behind the scenes and you just use it, then you’re learning the library and not the language.

The beautiful thing about Autoprefixer is that you write your CSS like it was intended, you get an understanding of what native CSS actually looks like without a mixin function abstracting the real CSS.

My current front-end workflow is as follows:

HTML/SASS/JS -> Gulp -> Gulp Ruby Sass, Gulp Plumber, Gulp Autoprefixer

Basically I write my styles using SASS, I then use Gulp to run tasks that generate my SASS to CSS, combine/minify my JS and other small tasks. Removing Compass removes an additional dependency and also results in small generated CSS file sizes.

Dwayne

Leave a Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • How To Mock uuid In Jest
  • How To Decompile And Compile Android APK's On A Mac Using Apktool
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • Wild Natural Deodorant Review

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz