How to Setup CodeKit using Sass and Compass for WordPress

I’m a recent convert to writing my CSS using Sass and Compass through CodeKit. It took me a little while to figure out how to get started with CodeKit and building WordPress themes specifically, so I thought I’d share how I got it all configured. Setting up CodeKit for use with static files is very simple, but since we’re building with WordPress there are a few things to look out for.

After you’ve gone through the process of installing WordPress locally and copying over your base theme into WordPress, go into CodeKit and select the “+” sign on the bottom left. Select New Compass Project.

create-compass-project

A screen will then appear asking for where you would like your asset locations to be. For my WordPress themes, I like to have the style.css in its default location, right in the theme folder root. When it asks you where you want the output style.css file to be in your folder structure in CodeKit, just enter a “.” for now since we don’t want the style.css file in a subfolder.

compass-settings

Click on “Create Compass Project”, browse to your theme’s folder, and select it. Next, open your newly created config.rb file which houses the Compass configuration. Change the css_dir field to css_dir = "/" to set the output of the style.css to the root of your theme folder.

config-rb

Now open your style.css file and in the first comment block which lets WordPress know that this folder structure is a theme, add a “!” to the first line like so:

comment-block

This tells CodeKit to keep the comment block intact even when compiling your SCSS files. If you have anything else in your style.css file at this point, you can delete the rest of it since your SCSS files will compile to this file. Copy the style.css file into your Sass folder (or whatever you named the directory) and name the file style.scss. This file sets your imports like so and has the core comment block included:

imports

After you set your imports (a good guide to Sass imports can be found here), do a manual refresh on CodeKit if it hasn’t found the new style.scss file. It should now see the new styles.scss file and it should say that’s it’s compiling to your style.css file in the root of your theme folder.

codekit-confirm

Next up, create a _normalize.scss file or _reset.scss file (if you like to reset your CSS), create a _global.scss (or whatever you like to name your main import file) in your code editor, import Compass at the top of the _global.scss file via @import "compass/css3";, and write your Sass like normal within the _global.scss file and your other .scss files. You’re all set!

Hopefully this guide helps you with your next project.

Here are some additional Sass resources and guides:

On a Search

Lately my posts have had a theme of “Focus”. This has been a theme of mine this past year and I’m at a place again where I need to focus on what I’m aiming for even more.

I’m closing Railtie Studio. This is a little anticlimactic as Railtie never got as big or did as well as I had hoped it would. That was completely my fault though. Railtie was an attempt at starting my own business and trying to build something sustainable. However during that experience, I discovered that it’s exactly what I don’t want to do. While I like the idea of being my own boss, I don’t want to run my own business, I have no interest in business development, and I want to do design and development full-time.

With that said, I’m on a search for a new job as a Web Designer/Front-end Developer working with WordPress. I’m specifically looking for a distributed company or a company in the Nashville, TN area. If you know of a business that is looking for someone, please let me know. If you’re a company looking at my profile and wondering if I’m a good fit, please have a look at my Portfolio.

I’ll continue to take on freelance projects while looking for a new job, so if you need someone with my work experience, please let me know.

Focus

I’ve noticed in the past year that I have a bad habit of bookmarking everything I come across when it comes to new web development technologies. In my day-to-day development I stick to mostly the front-end languages and markup but I’ll bookmark just about anything – from backend web app development, to videos of the new tech hotness that I’ll probably never need, to tutorials on an obscure language I’ve never heard of but that I “just might need some day”.

I have a serious bookmark hoarding issue.

The problem with this approach is that I don’t really learn anything completely. Sure, I know the core front-end technologies, but I would know them a lot better if I truly focused on them instead of focusing on what I don’t need.

Screen Shot 2013-07-08 at 11.06.46 AM

My new resolution is to learn only technologies that I need for current projects that need them (brilliant, right?). For instance, this blog is getting an overhaul as it is still too bloated for my needs. It’s WordPress-based, but doesn’t nearly utilize all that WordPress has to offer nor does it need all that WordPress has to offer. Utilizing my new resolution of learning only technologies I need, I’m now learning Pico: “A stupidly simple & blazing fast, flat file CMS.” made by Gilbert Pellegrom. Pico has no database and the content is all Markdown which is perfect for what I need. I’m going to do a full review once I’m done moving over, but for now I feel a lot more focused by identifying a problem and fixing it. I’m not half-heartedly trying to learn something new I don’t need (and probably will never need), but instead I’m actually doing something.