Grow your CSS skills. Land your dream job.

#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:

Comments

  1. 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. Great screencast, thanks for sharing.

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

  5. 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. 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=”http://media.tumblr.com/tumblr_m3thrqqYOo1qfssyl.jpg”&gt

  8. 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. 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. Hi. Really nice tutorial :) I hope someone could tell me some alternatives for those app’s for windows…

    Cump’s

  13. 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/

    • Anthony

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

    • 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. 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. Best screen cast ever. I’m off to upgrade to lion and buy code kit

  17. 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. 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)?

    Thanks!

  19. 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. 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?

    • 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. 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. 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. 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. Do I see Sublime auto-refreshing? Showing newly created page (or page modified)?

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

  28. Halley
    Permalink to comment#

    Any opinions on mixture? mixture.io

  29. Bu
    Permalink to comment#

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

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".