#111: Get Yourself Preprocessing in Just a Few Minutes

There is nothing to be afraid about in this brave new world of preprocessing. Native apps make it so easy that it should be a vital part of any modern workflow. In this video we have a simple project in which we use Jade and Sass on. We use CodeKit to watch the project, which not only makes the preprocessing trivially easy, but helps in more ways like refreshing the browser, injecting styles, and optimizing images.

Links from the video:


  1. User Avatar
    Sunny Ratilal

    Another great screencast. Feeling more confident now to use Sass and CSS preprocessors.

  2. User Avatar

    Great screencast Chris! Thank you very much for the time you dedicate to CSS-Tricks. I think most of the web development I know is because this blog.

    Love the jade span moment!

  3. User Avatar
    Andrew Leach

    Great screencast, thanks for sharing.

  4. User Avatar
    Farzin Seyfollahi

    Hi Chris,
    Great screencast! Thanks a lot for share.
    updates quickly! very good.

  5. User Avatar
    Dan Denney

    Thank you for making this. I really, really want to get Sass rolling in all my projects and I’m now officially out of excuses not to.

  6. User Avatar
    Jason Neel

    Would love to find a great Windows compatible preprocessing compiler that is as robust as CodeKit, although it seems could be pretty close. I’m a Mac user at home, but a PC user at work and would love to have the functionality of something like this there.

    One thing to note about CodeKit is that you need to at least be running Lion to use it.

    Great screencast as always, Chris. Thanks.

  7. User Avatar

    I think this meme accurately depicts any programs used in a CSS-Tricks Screencast…

    &ltimg src=”http://media.tumblr.com/tumblr_m3thrqqYOo1qfssyl.jpg”&gt

  8. User Avatar
    Duane Sibilly

    Thanks so much for this screencast. I’ve been hearing about pre-processing for web workflows for a while, but I never took the time to see how it would all work. Thanks to you, I’ve spent some time converting my last project to Jade+Sass and I don’t think I’ll write another web site without them!

  9. User Avatar
    Krsiak Daniel

    time for me to buy Mac
    cannot use any of these apps on Windows :)

  10. User Avatar
    William malo

    Thank you sir for making me discover codekit and sublimetext! I have bought both and I am much more productive now!

  11. User Avatar

    Can’t find wehre I can download RadWagon.
    Please Help.

  12. User Avatar

    Hi. Really nice tutorial :) I hope someone could tell me some alternatives for those app’s for windows…


  13. User Avatar

    Great screencast. But I’ve never used CodeKit because I use another alternative called Compass.app, targeting Compass (Sass library) users. The most benefit is that Compass.app is cross-platform, works on OS X, Windows and Linux.

    The same developer recently released Fire.app which also compiles HAML / ERb / Markdown / CoffeeScript, and it’s cross-platform, too. It’s not free-of-charge, but as cheap as a cup of coffee.

    Check this out: http://fireapp.handlino.com/

    • User Avatar

      This Compass.app costs $10. Iif you are on Mac or Linux you can just use the terminal to compile and compact Sass.

    • User Avatar
      Permalink to comment#

      The Fire.app seems nice, but it doesn’t provide as much functionality or language support when compared CodeKit. The frameworks functionality that CodeKit provides is brilliant.

  14. User Avatar

    Hey Chris! I have one question or should I say a bit of request. Can you make a short screen cast on how to use SASS when designing a WordPress theme? I have some lines in my head, but I want your thoughts on that.

    I think, I must first make a plain HTML theme using this awesome SASS then just trow WordPress code? Thank you much. I want to have a good deal of information before I make my step on buying Code KIT. Thank you for your work. Cheers.

  15. User Avatar

    sry but way too much wasted time in this video. i didn’t even finish. a little more pre-planning would have been nice.

  16. User Avatar

    Best screen cast ever. I’m off to upgrade to lion and buy code kit

  17. User Avatar
    Alex Coady

    Nice screencast. I’ve been using SASS with Compass recently but I’ve been using terminal which is okay, it’s nice and fast but I do like the GUI of the application that you used – definitely going to try it out.

  18. User Avatar
    Permalink to comment#

    I’m really interested in hearing more about Jade, apparently I missed that somewhere. What are the differences between using a preprocessor like Jade, and using Zen Coding (as I currently do)?


  19. User Avatar
    Permalink to comment#

    Guys, what would you recommend as a LESS preprocessor for Windows? I’ve tried SimpLESS & WinLess but it does not look as good as CodeKit.

  20. User Avatar
    Georgina Hughes
    Permalink to comment#

    Thanks for putting this video up. I’ve been a bit unsure as to where to start, and whether or not to bother for a while now. I watched this down the pub the other night and decided to give it a go. I’ve battled with installing Ruby on my work Win 7 box, but I’ve got it going now. Although I’ve only played with the basics so far I can really see that this is going to be my coding method of choice from now on. Thanks again :)

  21. User Avatar
    Permalink to comment#

    I guess one reason not to ‘Compress’ the processed CSS is that someone may need to take over your website and not have access to the SCSS and therefore have to deal with a compressed CSS file.

    Or is there a way around that?

    • User Avatar
      Chris Coyier
      Permalink to comment#

      I wouldn’t penalize the performance of a website for something that might only theoretically happen. If that’s a huge concern, output an expanded file as well into the directory somewhere, but only actually have the web page used the compressed one.

    • User Avatar
      Permalink to comment#

      That’s a good point and a simple solution. Thanks.

  22. User Avatar
    Cian Brassil
    Permalink to comment#

    For Windows users, WebMatrix supports Less and SASS. There’s also a plugin for WebMatrix called OrangeBits which is a code time compiler for sass, scss, less and CoffeeScript.
    The OrangeBits compiler automatically creates CSS every time you save your Sass document.
    I haven’t developed with this yet but it looks promising and a neat solution for Windows users.
    More on that here – http://bit.ly/OWGeQR

  23. User Avatar
    Harry Williams
    Permalink to comment#

    Love the screencast mate, watching this made me curious about what Jade is and after using it a bit I’m really on board with it. Not sure how long it’s been about but I’m surprised it’s not more popular – I only managed to find one video tutorial on it that wasn’t in Spanish.

    Just wanted to know what your thoughts were on it… Seems to me like something that should be more encouraged when writing HTML.
    Again, thanks for the screencast.

  24. User Avatar
    Tim Osborn
    Permalink to comment#

    ah! auto style injection! I want it!

    tragic that Codekit (which I cant work without) cant inject into FF.. .I’m torn because I rely on FirePHP Firebug addon in Firefox, which I miss in Chrome, and instead use the FF ‘CSS reloader’ which requires a shortcut to refresh, so I still have to wait a moment (and its not animated!)…

    <wistful> If I could find a great FirePHP extension for Chrome… instant switch

  25. User Avatar
    Liz Gewirtz`
    Permalink to comment#

    loved it. thanks.

  26. User Avatar
    Permalink to comment#

    Do I see Sublime auto-refreshing? Showing newly created page (or page modified)?

  27. User Avatar
    Permalink to comment#

    Nice cross OS app called “Koala”. http://koala-app.com/

  28. User Avatar
    Permalink to comment#

    Any opinions on mixture? mixture.io

  29. User Avatar
    Permalink to comment#

    Man, loved SCSS. Amazing Screencast. Just looking forward to start coding SCSS

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.