WordPress and Sass: Quick tips you should know

WordPress and Sass: Quick tips you should know

Online by JSC0d3
July 8, 2017 | | | | 667 recognitions

There are numerous advantages of WordPress SASS for WordPress developers. You have most likely heard numerous contentions for utilizing a pre-processor at this point. CSS pre-processors give the chance to better code association by utilizing partials and settling styles. Pre-processors offer engineers some assistance with writing so as to style speedier mixins and capacities. Pre-processors additionally permit us to compose more viable, adaptable code with rationale and variable.

WordPress and Sass: Quick tips you should know

What is Sass?

The CSS that we use was designed to be an easy to use stylesheet language. However web has evolved, and so is the need of designers to have a stylesheet language that allows them to do more with less effort and time. CSS preprocessor languages, like Sass, allow you to use features that are not currently available in the CSS such as using variables, basic math operators, nesting, mixins, etc.

It is very much like PHP which is a preprocessor language that executes a script on the server and generates an HTML output. Similarly, Sass preprocesses .scss files to generate CSS files that can be used by browsers.

Since version 3.8, WordPress admin area styles were ported to utilize Sass for development. There are many WordPress theme shops and developers already utilizing Sass to speed up their development process.

Sass also allows us to write functions to generate blocks of repeated style code. For example, a button function could accept the colour or style as a parameter and generate all the standard CSS for a site’s button UI: border radius, gradients, text colours and so on. We can also break up our giant stylesheets into organised modules. Nearly every CMS, plugin and web app uses directories and partials to improve code maintainability: Sass allows us to do this with our CSS.

The techniques explained in this tutorial are specific to Sass using the SCSS syntax, but they are applicable to most other preprocessors – like Less or Stylus– as well.

Converting theme stylesheets

If the WordPress theme you’re using has Sass files included already, the process of converting existing theme stylesheets to Sass is done for you. I typically start new themes with the Underscores template from Automattic (underscores.me). When creating a new theme package from its website, you’ll find a ‘_sassify!’ option if you click the ‘Advanced Options’ link. This will provide Automattic’s default Sass library for you when you download the blank theme.

It’s important to remember that the CSS cascade still applies to code written in Sass. Styles written in partials imported later have the ability to override styles in partials imported earlier.

It’s also wise to import partials that contain your mixins and variables at the beginning of your primary Sass file, so that later partials can actually use those variables and mixins.

WordPress comments

According to WordPress style.css requirements, we need to make sure our compiler preserves the WordPress comments at the top of style.css. When Sass’ output_style is set to :compressed, it strips all comments when it compiles CSS.

To ensure that those comments are left intact, add an exclamation mark (!) to the beginning of the comment block in style.scss:

/*!
Theme Name: 
Theme URI: 
Author:
Author URI: 
Description: 
*/
// Import all your .scss partials below

What about CSS @import?

The problem with using @import in your CSS file is that each time you add an @import, your CSS file makes another HTTP request to the server. This effects your page load time which is not good for your project. On the other hand, when you use @import in Sass, it will include the files in your Sass file and serve them all in a single CSS file for the browsers.

To learn how to use @import in Sass, first you need to create a reset.scssfile in your theme’s stylesheets directory and paste this code in it. Now you need to open your main style.scss file and add this line where you want the reset file to be imported:

@import 'reset';

Notice that you do not need to enter the full file name. To compile this, you need to open IDE Editor and click the compile button again. Now open your theme’s main style.css file, and you will see your reset css included in it.

Organise your partials

To recap, we’ve taken the theme’s existing stylesheet apart and refactored some code to make things cleaner and Sassier. Now we can organise our partials to improve maintainability in the long run.

Remember that the cascade still matters. Sass-compiled CSS is just like plain CSS in that styles that appear later in the stylesheet can override styles that appear earlier. As a rule, import your general styles before you import specific styles.

Similar partials can be organised in folders. There are two ways to import Sass partials from directories. The first is to import each file into style.scss including the folder name in the import directive, like this:

@import 'base/variables';
// Variables allow you to easily organize and update values repeated globally in a project
@import 'base/nestin';
// Nesting allow you to easily organize Sass visually and generate complex selectors dynamically
@import 'base/mixins';
// Mixins allow you to create block of styles that can be modified by passed vaiables
@import 'base/functions';
// Functions allow you to calculate values based on global variables and passed values

There are almost as many ways to organise Sass partials as there are developers trying to organise Sass partials.

Here’s one fairly simple organisation scheme you could use:

  • /base/ (variables, mixins, reset, typography)
  • /layout/ (grid, header, footer)
  • /vendors/ (plugins, vendors, etc)
  • /components/ (buttons, menus, forms, widgets)
  • /pages/ (home, landing page, portfolio)

Summing up

 This article only begins to explore the potential of using Sass in WordPress theme development. Chances are strong that you’re eager for more information now, especially if this is the first thing you’ve read on the subject.

Check out the ‘Resources’ boxout for more reading around the subject – these articles include several variations on a Sass-WordPress workflow. Some of their advice differs from what I’ve recommended (especially on the topic of organising partials), but that’s fine – find the techniques and workflows that work for you!

If you’re a web developer, and you haven’t used Sass, you owe it to yourself to check it out. Once you start composing your stylesheets with Sass, you’ll never go back. It’s incredibly powerful and it will allow you to build and prototype more quickly. It’s especially useful when you’re designing in the browser (like we do at The Theme Foundry).

JSC0d3's Logo
About JSC0d3

JSC0d3 is an entrepreneur, online marketer, and an employee of an IT company. When not building websites, creating content, or helping customers improve their online business, spend time with their wife and two beautiful children. Although he still feels new in WordPress, he enjoys sharing what he has learned with all of you! If you want to get in touch with him, you can do this through this website.

On the same idea

Posted by | April 1, 2019

Images are vital components of every website Before you start questioning the importance of images, just try to imagine your favorite blog or website...

Posted by | March 5, 2019

I’ve been loosely following the noise and #wpdrama surrounding Gutenberg for as long as it has been around and honestly for the most part I’ve...

Posted by | February 24, 2019

To ensure that your site ranks highly in Search Engine Result Pages (SERPs), you’ll need to make it easy for search engine ‘bots’ to explore...

Previous PostBackNext Post

Leave here an impression