Using Sass and CodeKit Inside WordPress

Presented by Hugh Smith on 04/23/2018 2:00pm

Speed up your development when applying styles to sites.

Hold Your Head TogetherWe’ll be covering the basics applications of using Sass and Codekit inside WordPress. Bring duct tape because THIS is just the beginning...

Sass, which is actually an acronym for Syntactically Awesome Style Sheets, is a mature, stable, and powerful professional grade CSS extension language.

CodeKit is a Mac App for developers that has the best workflows built right in, includingLibsass (LibSass is a C/C++ [a general-purpose programming language] port of the Sass engine) for faster Sass compiling.

WordPress is a free and open-source content management system based on PHP (a widely-used open source general-purpose scripting language and recursive acronym for PHP: Hypertext Preprocessor) and MySQL (an open-source relational database management system whose name is a combination of "My", the name of co-founder Michael Widenius's daughter, and "SQL", the abbreviation for Structured Query Language).


Sass has been actively supported for over 11 years and is compatible with most CSS libraries. The Sass Core Team works diligently to not only try to keep up but to stay ahead by offering more functionality and ability than other CSS extension language.

It has been said that once you learn the power of SASS over CSS you will not only never look back, but you’ll wonder how you ever lived without it.

3 Primary Benefits of Using Sass

  1. Simplicity
  2. Speed
  3. Shorter Files


Awhile back it was recommended that you separate or segment your css files into separate files for simplicity and organization. SASS uses a Ruby compiler that allows you to break up stylesheets into multiple files.

There are many ways to break up your stylesheets in order to keep them more organized.

Organizational Examples

  • grids
  • reset
  • mixins
  • breakpoints
  • media queries
  • fonts


SASS’ Ruby compiler creates one “style.scss” that uses the “@import” to load all the various other stylesheets when it is compiled. This approach eliminates having a huge number of HTTP requests from the multiple files of the past that used to cause your web pages to load slowly resulting in a fast page delivery.

With speed playing a major role in today’s user experience and SEO, having your website pages load quickly is imperative.

Shorter Files

Another benefit of SASS is that it allows you to define variables that are reusable throughout our entire project. This is particularly beneficial for things like colors.

For example, in SASS syntax you declare a variable named $dark-gray; Any time you want to use the color #555, you would simply declare background: $light-gray. Then, when and if you need to change the color to a darker color gray – say #222, you simply go to that variable reference and change $light-gray to #222 – in one place and only one time; saving time and overall length of your files.

Sass, CodeKit and WordPress Links


Presenter Bio: Hugh Smith

Hugh Smith has been doing freelance work and building his own successful web development (among other things) business for years. Hugh is not from Australia. The Oz comes from Hugh's roots in Kansas, and though he also says that he is not a wizard, we're here to tell you that this is one man behind the curtain you're going to want to pay attention to.