For years CSS has been my favorite language to write while developing a website. The aspect of design or the presentation layerof a website had always hit home with me. The day I was introduced to Sass I was instantly turned off by it. I thought to myself—“Why on earth would I make things more hard on myself when developing a website. I’ve got enough to deal with…”

From the outside perspective I thought of Sass as an advanced language which added both useless complexity and mind numbing configurations to my projects. Little did I know, once learned, the language I thought was so tough would save me time, headaches, and improve my workflow.

The reality is that Sass (and other CSS preprocessors) can be a extremely powerful ally to any designer or developer interested in writing less and doing more. In the end all of these preprocessing languages get compiled down to CSS. So, if you simply don’t like the idea of using a preprocessing language you’re still in the clear.

This article isn’t meant to teach you Sass or explain why it’s so powerful. Rather, my intention is to show you how to go about using it with WordPress; the most common CMS available today and one we love here at Elegant Themes.

Prerequisites

This tutorial assumes you have working knowledge of setting up a WordPress environment. For demonstration purposes I will be downloading WordPress and running it locally on my machine and showing you each step of the way. This may be review for some of you and new to others. I invite you all to follow along regardless. For more information in getting started with WordPress check out some of our other blog posts.

Helpful Tools

Before we start, I recommend getting ahold of some tools to make your life easier when compiling your Sass. I work on a Mac so I personally use CodeKit but you are welcome to use any other preprocessor out there or even the good ole’ command line which we will use in this tutorial. Another tool I will use throughout this tutorial is MAMP.

Setting Up A Local WordPress Install

To get started with WordPress you’ll want to head to wordpress.org to download the latest version.

After unarchiving the .zip file, rename it and drop it into your htdocs folder that was installed when you installed MAMP.

*User*/Applications/MAMP/htdocs/

At this point make sure MAMP is fired up. Open the start page to your newly installed WordPress directory. In our case it should be at the url http://localhost:8888/sass-wp/ . At this point you should get an error. Don’t worry we just need to configure our WordPress installation to run locally but before we create our config file we need to create a Database for WordPress to use.

Head back to the start page in MAMP and click on PHPmyAdmin under the Tools menu item. A quick way to get there is through the url http://localhost:8888/MAMP.

Once you arrive inside PHPmyAdmin simply create a new database. For this tutorial I have called our database sass-wp

Next we finally head back to our WordPress install at http://localhost:8888/sass-wp and click the Create a Configuration File Button.

Be sure to include your locally created database name (the one you just made, ours is sass-wp), username, and password. For this tutorial we called our database sass-wp and since we are using MAMP our username and password will both be root.

If everything is setup up correctly you will end up at the install screen. Input all of the information about your WordPress site and click Install WordPress. Once installed you’ll login and arrive at your dashboard.

Installing Sass and Compass

Sass has a Ruby dependency so we need to install the Ruby gem in order to get working properly. Most Mac’s come with Ruby installed but if you are on a Windows machine you may have to look into an alternative solution. We will also be using Compass, an open-source CSS authoring framework which out of the box provides many quick and useful additions to Sass. An alternative to Compass is another framework called Bourbon. Use whatever framework you like or combine theme like I sometimes do. Visit the install documentation at http://compass-style.org/install/ or http://bourbon.io/docs/ to learn more.

Quick Install

To install Sass and Compass for the first time, simply open up your command line tool of choice and type the few lines of code below.

Note* – you may get an error about getting access to directories you are changing. A quick fix is to type the command sudo before all of these lines. Doing so will prompt you for your system password. From there you should see both Sass and Compass install on your system.

$ gem update --system $ gem install sass $ gem install compass

Now that we have both Sass and Compass installed we need to set up our theme’s folder structure.

Be sure to keep your command line editor open.

Setting up our theme with Sass with Compass

We will be using the twentyfourteen theme for this tutorial. The default twentyfourteen folder structure is as follows:

Adding the necessary files and folders

To get started we need to add a few folders and files.

Our theme already contains an images directory but if yours does not you will need to add one.

directory but if yours does not you will need to add one. We need to also create a sass directory. This folder containers any Sass files that are to be compiled to CSS. You’ll likely have one main Sass file but the option to add multiple files exists which I’ll explain shortly.

directory. This folder containers any Sass files that are to be compiled to CSS. You’ll likely have one main Sass file but the option to add multiple files exists which I’ll explain shortly. Inside the sass directory you will need to create a style.scss file. This file will be targeted by the preprocessor to be compiled to your theme’s primary CSS file. Note: The CSS file must be in the theme’s root in order for WordPress to function correctly. It has to exist!

directory you will need to create a file. This file will be targeted by the preprocessor to be compiled to your theme’s primary CSS file. It has to exist! Since Sass is built on ruby we need to create a config.rb file to tell Sass/Compass where the files are. Below is the newly updated theme folder with the newly created files and folders highlighted showing the new hierarchy.

The files highlighted in red above have either been added or referenced in our Sass configuration (config.rb file) which we will cover next.

The config.rb file

Every Compass based project utilizes a configuration file to define folder/file names and their locations within our projects. In our case, the config.rb file will look like the example below. I’ve added some comments to explain what each line means.

http_path = "/" #root level target path css_dir = "." #targets our default style.css file at the root level of our theme sass_dir = "sass" #targets our sass directory images_dir = "images" #targets our pre existing image directory javascripts_dir = "js" #targets our JavaScript directory # You can select your preferred output style here (can be overridden via the command line): # output_style = :expanded or :nested or :compact or :compressed # To enable relative paths to assets via compass helper functions. # note: this is important in wordpress themes for sprites relative_assets = true

You’ll notice the config.rb file is very easy to understand. This file defines where our CSS, JavaScript, Images, and Sass live inside our project directory. In our theme folder the CSS directory resides at the root level of our theme. The Sass files reside inside the Sass folder we created earlier. Our JavaScript is inside a folder named “js” and so on.

Below the first five lines there are options you can comment or uncomment that deal with the output of traditional CSS once our Sass compiles. I typically use the :nested option during development and move to the :compressed option when my projects move to production to save on load times. Use whichever option you please.

Making Sass Watch for Updates

The best part about a preprocessor is the automatic compiling of CSS code. To get Sass to watch for updates we need to type one more command in our command line editor. With our theme all ready to go type:

$ cd /yourproject $ compass watch

Be sure to change your command line path to your working project folder. And then type the compass watch command like above. Compass will watch your folder as new styles and files are created or changed. From there new CSS is generated and compiled to our root style.css file.

Let’s write some Sass

The process of setting up WordPress with Sass and Compass probably seems daunting so far but I promise you the more you do this the easier and faster it will go with each site you build. In the long run you will save time by writing less Sass to generate more CSS.

Now that we are all configured we are ready to write some Sass.

To get started let’s open the default style.css file in the twentyfourteen theme and copy over the commented block at the top which looks like this:

/* Theme Name: Twenty Fourteen Theme URI: http://wordpress.org/themes/twentyfourteen Author: the WordPress team Author URI: http://wordpress.org/ Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier. Version: 1.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready Text Domain: twentyfourteen This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */

To make things easy I’ll just reuse this comment as is but add it to the top of our style.scss file inside our sassfolder. We will also include Compass as well as the ever handy Compass reset.

So now our style.scss within our sass folder looks like:

/* Theme Name: Twenty Fourteen Theme URI: http://wordpress.org/themes/twentyfourteen Author: the WordPress team Author URI: http://wordpress.org/ Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier. Version: 1.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready Text Domain: twentyfourteen This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ @import "compass"; @import "compass/reset";

From here we are essentially ready to style up our theme. One thing to note is that once you save your style.scss file a new style.css file in your themes root will be generated and copy over the existing one. This is assuming you are starting from scratch when redesigning the twentyfourteen theme. If you don’t wish to override the default styles you’ll need to copy those into the style.scss so they get compiled as well or into a partial which we will cover next.

Partials

I am a big believer in modular based programming. By this I mean dividing code up into smaller more workable files that later get compiled into one file. Earlier in the post I mentioned the option to use multiple Sass files that later get generated into one CSS file. These files are known as partials and typically have a prefix of and underscore character which looks like “_partial.scss” once written. To use partials I add a folder titled _partials within our sass folder like below. Inside that folder I have created several smaller .scss files we will used in our project. You can create as many as your want so long as they are included within your main style.scss file.

How to use partials

Partials with the underscore prefix are not compiled into an additional stylesheet. The underscore character tells Sass that this file is not to be compiled directly so it ignores it initially. To get the styles within these files into our stylesheet we need to include these files in our style.scss file. Check our style.scss file below indicating this:

/* Theme Name: Twenty Fourteen Theme URI: http://wordpress.org/themes/twentyfourteen Author: the WordPress team Author URI: http://wordpress.org/ Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier. Version: 1.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready Text Domain: twentyfourteen This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ @import "compass"; @import "compass/reset"; // Here we import our partials @import "_partials/mixins"; @import "_partials/variables"; @import "_partials/typography";

Inside each partial I’ve added comments and some basic Sass:

_mixins.scss

/* mixins.scss */

variables.scss

/*_variables.scss */ /* Body Text Styles */ $text-color: black; $base-font-size: 16px; $base-font-family: "HelveticaNeue", Helvetica, Arial, sans-serif; $base-font-weight: 400;

_typography.scss

/*_typography.scss*/ body { color: $text-color; font-size: $base-font-size; font-family: $base-font-family; font-weight: $base-font-weight; line-height: 1.6; }

Since Compass is watching our project and we have included our partials into our main style.scss Sass file, it will take these changes and generate a new style.css file once I save each of these files. Now our style.css file looks like:

style.css

/* Theme Name: Twenty Fourteen Theme URI: http://wordpress.org/themes/twentyfourteen Author: the WordPress team Author URI: http://wordpress.org/ Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier. Version: 1.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready Text Domain: twentyfourteen This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ /* line 17, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } /* line 22, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ html { line-height: 1; } /* line 24, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ ol, ul { list-style: none; } /* line 26, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; border-spacing: 0; } /* line 28, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } /* line 30, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ q, blockquote { quotes: none; } /* line 103, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } /* line 32, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ a img { border: none; } /* line 116, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } /* _mixins.scss */ /* _variables.scss */ /* _typography.scss */ /* line 3, sass/_partials/_typography.scss */ body { color: black; font-size: 16px; font-family: "HelveticaNeue", Helvetica, Arial, sans-serif; font-weight: 400; line-height: 1.6; }

Our code has now output into the single CSS file which means we have successfully installed a WordPress theme with a working Sass & Compass workflow. Congratulations on making it this far!

Since we have overridden our default theme styles for the twentyfourteen theme our theme now looks a little bare but is ready to be customized using Sass!

Avoid the Command Line

A lot of popular apps and task runners have surfaced for Sass or Less users. These apps compile code as well as a lot of other things like browser refreshing, minifying code, image optimization, source mapping and more. A few of these apps and task runners are listed below. With these you can either drop your project right in or get set up in no time performing tons of tasks on your project at once. All of these operations happening at once is big reason they are a little bit easier than the command line.

Version Control

I wanted to speak briefly of version control and using Git with a Sass project like ours. Git is a powerful tool that helps us keep a history of our work in the event that we do something like break our code or integrate new code for a new release. When using Sass some new folders and files are generated that don’t always need to be versioned with Git. The .sass-cache folder or sass folder for example isn’t meant to be used on a live server once in production. In the end the file that matters is still that style.css file in our root directory of our theme. The rest you can version as you please, especially if working in teams. Whether its for a backup or just peace of mind, choose what works best for you and/or your team.

Conclusion

WordPress, Sass, and Compass can be a powerful trio when fused together like we have done. While most Sass newcomers tend to frown at all the extra work and set up, I think once they dive in and really understand the benefits to using the language they then will be hooked forever. Switching back to regular CSS will feel much more daunting than before. Trust me!

If you are still new to Sass I encourage you to give it a try. Check out the guide at http://sass-lang.com/ to get a crash course in understanding the language. If you can write CSS, you can write Sass.

Hopefully this tutorial brings anyone using Sass a better understanding of how to combine it with WordPress and help you build or edit your theme’s more efficiently than ever before.

Article thumbnail image by Tomnamon / shutterstock.com