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:
I already created a SASS based starter front-end kit, easily to integrate with WordPress theme https://github.com/tokokoo/pondasee :)
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.
Give it a try- you might like it.
But if not, there’s no problem with thoughtfully written CSS.
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.
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!)
Always nice to see a familiar face in the comments. Glad it was helpful!
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? :-)
Nice video dude!
I’m definitely ready to start using Codekit.
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.
Wow, Bones – great tip, thanks Rick!
And of course many-many thanks for this useful post Devin!
[…] Getting Started With Codekit + CSS Preprocessors (Post includes a […]
Thanks, Devin. The video was very helpful and the first one that got me going with using a css pre processor. Nice work.
Thanks a lot man
So glad you did this
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!
Thanks! This was very helpful. I didn’t find anything else that put the pieces together between coda and codekit.