Getting Sassy with WordPress 4.7 and Jetpack

I’m not a WordPress developer, I’m a WordPress site builder. I don’t develop the blocks to create a website, I use those that others have created. Those blocks are themes and plugins.

Tweaking designs

However, the styling and design will not always look exactly like you want. You’re happy with the majority of it, but you’d just like to change a few little things. With adding a bit of CSS (Cascading Style Sheets), you can easily tweak the design a little bit.

However, there are limitations to CSS. Luckily, learning Sass can help you deal with those. Sass will allow you to define variables, use nesting, and create mixins to make the customisation process faster.

In order to use Sass (Syntactically Awesome Style Sheets), you’ll need a compiler to translate your .scss file to a .css one so browsers can read it. Grunt.js and CodeKit are a few examples of tools to use for compiling. However, for just small tweaking of your website, using an external compiler seems a bit overkill.

WordPress 4.7 and Jetpack

With the release of WordPress 4.7, the customizer now includes support for custom CSS with a direct preview of the custom code. However, it doesn’t have syntactically nice looking code. If you install Jetpack, you will get that. Indents will be created and it’ll be easier to read the CSS, and retrieve elements by looking at the line numbers.

With Jetpacks’ Custom CSS option activated, you will not only see a nice looking syntax, you’re also able to activate a preprocessor and use Sass from with the customiser; just select it at the bottom.

Screen Shot 2017-03-04 at 2.43.24 PM.png

The above is a short summary of a workshop I gave at CMS Africa 2017. After introducing Sass, we did some exercises using the Twenty Seventeen theme, the customizer and Jetpack.


2 responses to “Getting Sassy with WordPress 4.7 and Jetpack”

  1. Ngonidzashe Mhuruyengwe avatar

    Great read Job! I’m also not a ‘WordPress’ developer so I can totally relate. I’ve been working on my CSS skills and learning how to uses SASS since WordCamp (remember when you told me about it!!)

  2. […] In a previous post, I’ve introduced using Sass through the WordPress Customiser and Jetpack. In this post, I want to quickly explain what exactly Sass is and where to get started. […]

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Blog at

%d bloggers like this: