Building WordPress powered sites with SASS

WordPress is still the most popular content management system, used for creating websites. As of 2023 40% of all websites on the internet are built using WordPres. It’s no surprise that so many developers and designers still choose WordPress to build their sites. It’s an easy-to-use platform that offers a wealth of customisation options.

However, building a website can be a complicated process, not all approaches are the same. In this article we are going to dive into one area in particular: the styling of the site. Think green headings, a particular font, how large is the font for the body text etc.. When the team here at The DMA are designing a site, we create a customised WordPress theme for each project, it’s made up of a style sheet, written in a language called CSS.

Our approach is to use a CSS pre-processor: SASS. SASS stands for Syntactically Awesome Style Sheets (we nerds love a good acronym!), it is a powerful tool that can greatly improve site performance and make it easier to maintain a WordPress website over time.

Improved WordPress performance

One of the primary benefits of using SASS within WordPress is improved site performance. SASS allows us to write more efficient and streamlined CSS code, which can help to reduce the size of the stylesheet and decrease page load times.

SASS accomplishes this through its use of variables, mixins, and nesting. Variables allow us to assign values to a specific element in the stylesheet and reuse that value throughout the stylesheet. This reduces the need to repeat code and can result in a smaller stylesheet. A good example here the colours used within your WordPress site. All the headings might be a particular shade of green. This colour is stored as a variable in SASS. If we ever need to update a particular colour across the site we can change it quickly in one place and it flows through the rest of the website.

Mixins allow us to define a group of CSS properties and reuse that group throughout the stylesheet. This can help to reduce the amount of code needed to style a site, again making it easier to update the site’s styling in the future.

Nesting is another powerful feature of SASS. It allows us to nest CSS selectors within one another, which can help to make the stylesheet more organiser, easier to read. This can also help to reduce the size of the stylesheet, as it eliminates the need to repeat selectors multiple times.

Improved Site Maintenance

We have already touched on this but it’s a big benefit of using SASS within WordPress. Controlling the website’s style in SASS can make it easier for us to make changes over time, quickly changing a colour, swapping out a font for a new one, across the entire website. Up-keep of your WordPress site becomes a joy not a hassle.

SASS also offers powerful organisation tools, like partials and imports. Partials allow us to break the stylesheet into smaller, more manageable pieces. This can make it easier to find and update specific sections of the stylesheet. Imports allow us to import code from other stylesheets, making it possible to reuse code across multiple sites.

Not all WordPress site are created equal

Using a CSS pre-processor like SASS within WordPress can greatly improve site performance and make it easier to maintain a site over time. A site built without this kind of technology might look the same to the casual visitor. But over time is unlikely to be at its best in regards to performance and will be harder to maintain over time.