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.

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.