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:
Another great screencast. Feeling more confident now to use Sass and CSS preprocessors.
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!
Great screencast, thanks for sharing.
Great screencast! Thanks a lot for share.
updates quickly! very good.
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.
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.
I am yet to discover any preprocessing tools as good as CodeKit on a PC but ScoutApp (http://mhs.github.com/scout-app/) is does the job.
I think this meme accurately depicts any programs used in a CSS-Tricks Screencast…
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!
time for me to buy Mac
cannot use any of these apps on Windows :)
Thank you sir for making me discover codekit and sublimetext! I have bought both and I am much more productive now!
Can’t find wehre I can download RadWagon.
Hi. Really nice tutorial :) I hope someone could tell me some alternatives for those app’s for windows…
As Jake Bresnehan pointed out above there is ScoutApp (http://mhs.github.com/scout-app/).
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/
This Compass.app costs $10. Iif you are on Mac or Linux you can just use the terminal to compile and compact Sass.
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.
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.
sry but way too much wasted time in this video. i didn’t even finish. a little more pre-planning would have been nice.
Best screen cast ever. I’m off to upgrade to lion and buy code kit
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.
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)?
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.
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 :)
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.
That’s a good point and a simple solution. Thanks.
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
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.
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
loved it. thanks.
Do I see Sublime auto-refreshing? Showing newly created page (or page modified)?
Nice cross OS app called “Koala”. http://koala-app.com/
Any opinions on mixture? mixture.io
Man, loved SCSS. Amazing Screencast. Just looking forward to start coding SCSS