The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

#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. Sunny Ratilal

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

  2. Juan

    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. Andrew Leach

    Great screencast, thanks for sharing.

  4. Farzin Seyfollahi

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

  5. 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. 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. PatrickNeal

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

    &ltimg src=””&gt

  8. 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. Krsiak Daniel

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

  10. William malo

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

  11. Ole

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

  12. BrunoG

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


  13. chitsaou

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

    The same developer recently released 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:

    • Anthony

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

    • Nick
      Permalink to comment#

      The 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. Eduard

    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. s

    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. Will

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

  17. 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. Thomas
    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. SiamKreative
    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. 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. Simon
    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?

    • 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.

    • Simon
      Permalink to comment#

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

  22. 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 –

  23. 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. 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. Liz Gewirtz`
    Permalink to comment#

    loved it. thanks.

  26. Jerome
    Permalink to comment#

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

  27. Clinton
    Permalink to comment#

    Nice cross OS app called “Koala”.

  28. Halley
    Permalink to comment#

    Any opinions on mixture?

  29. Bu
    Permalink to comment#

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

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed