Getting Started With CodeKit + CSS Preprocessors

Posted

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 thoughts on “Getting Started With CodeKit + CSS Preprocessors

  1. Jamie wrote:

    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.

    • Devin wrote:

      Give it a try- you might like it.

      But if not, there’s no problem with thoughtfully written CSS.

  2. Patrick Daly wrote:

    You oughta give WP-LESS a try because it cuts out the whole compiling step. Write your LESS in the theme, enqueue the LESS file and let the plugin do the crunching.

  3. Hugo Baeta wrote:

    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!)

    • Devin wrote:

      Always nice to see a familiar face in the comments. Glad it was helpful!

  4. 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? :-)

  5. Aaron Dowd wrote:

    Nice video dude!

    I’m definitely ready to start using Codekit.

  6. Rick wrote:

    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.

    • Laszlo Prekop wrote:

      Wow, Bones – great tip, thanks Rick!

      And of course many-many thanks for this useful post Devin!

  7. Pingback: SASS + Codekit + WordPress Theming : Chrisdigital's Digital Designer Blog : Chris Carvey : NYC

  8. crawpdx wrote:

    Thanks, Devin. The video was very helpful and the first one that got me going with using a css pre processor. Nice work.

  9. Jon Buckner wrote:

    Thanks a lot man

    So glad you did this

  10. chris field wrote:

    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!

  11. Beth Backen wrote:

    Thanks! This was very helpful. I didn’t find anything else that put the pieces together between coda and codekit.

Leave a Reply

Your email address will not be published. Required fields are marked *

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>