Getting Started With CodeKit + CSS Preprocessors

I experimented with CSS preprocessing today (both LESS and SASS). I have to admit, it was much easier to set up than I thought and really intuitive to use.

To get started, I just downloaded a copy of CodeKit (OSX) and dropped a couple theme directories into it. When that happened, CodeKit started to watch all the LESS and SASS files in those directories- and automatically compiled them into actual CSS files whenever I saved.

To become more familiar with the syntax, I forked a copy of Jared Erickson’s LESS theme on GitHub and made some edits. Then I converted it to SASS syntax. If you’re completely new both SASS and LESS- I think that’s a fun small project to do.

I didn’t get deep into the mixins and nesting, but I already see several ways it could improve my workflow. And honestly, I was just as impressed with the CodeKit UI and features- like live browser reloading, file minification, etc.

Just so you have no reason not to try it too, I made a short video showing how to take a regular WordPress theme and set it up to start using SASS files with CodeKit:

Other Resources

About Devin

I'm a WordPress developer based in Austin, Texas. Follow my projects on GitHub, or more general WordPress ramblings as @devinsays on twitter.

15 Responses

  1. Maybe I’m not familiar enough with CSS pre-processors, but isn’t just thoughtfully writing your CSS enough? What’s so great about pre-processors? I’ve never felt the need for them.

  2. Devin! You save the day as always ;) Thank you for this!! I’ve been looking into Sass and Less for a few days now trying to understand how to get started and nothing I read was as simple and straight to the point as your little video! THANK YOU! :D

    Gonna give codekit a try while developing my new portfolio. (oh, and I’m using your portfolio custom post type with a few modifications, thank you for that as well!)

  3. I often use SimpleLESS. It’s very useful:

    1. You select a folder to monitor (the whole project directory or just /css)
    2. Write your LessCSS on a your-style.less
    3. It compile your-style.css…. in realtime (and even minify, if you want)!! :-)

    Do you think It could be helpful? :-)

  4. I am loving CodeKit. I use SASS starting in late December and haven’t looked back. Thanks for the additional info!

    FYI, I’m using Eddie’s Bones WordPress base theme which includes extensive comments and documentation. It also relies on LESS or SASS. Highly recommend it.

  5. Thanks, Devin. I had a hard time following some of the other tutorials – I am just trying to get my feet wet here – yours did the trick. I appreciate getting me through some of these basic steps!

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>