How to use Sass in WordPress – A quick guide

Sass in WordPress

How to use Sass in WordPress? In this article, I’ll show you how to use the CSS preprocessor Sass and make your life easier while writing the front end of your website.


Table of contents

What is Sass

Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.

Why use Sass

Sass has many advantages, but I will note some basic and important things. Sass helps you to keep your stylesheets well-organized. You can split your CSS into smaller .scss files (partials), which helps you to maintain the code and makes it easier to make changes in the future. Using nesting decreases the number of lines and keeps your code more readable. Using variables and mixins, prevents you to repeat the same things, like color hex codes and flexbox elements.

Sass syntax

Sass supports two different syntaxes, SCSS and Intended.

SCSS

The SCSS syntax uses the file extension .scss. With a few small exceptions, it’s a superset of CSS, which means essentially all valid CSS is valid SCSS as well.

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    
    &:hover {
        background: #000;
    }
}

Indented (Sass)

The indented syntax was Sass’s original syntax, and so it uses the file extension .sass. Because of this extension, it’s sometimes just called “Sass”. The indented syntax supports all the same features as SCSS, but it uses indentation instead of curly braces and semicolons to describe the format of the document.

.button
  display: flex
  align-items: center
  justify-content: center
  background: #fff

  &:hover
    background: #000

I prefer to use the SCSS syntax, so all the examples will be in SCS.

Sass basics

Here are the basics of Sass.

Variables

Variables are a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you’ll want to reuse. Sass uses the $ symbol to make something a variable. For example:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Nesting

Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    
    li {
      display: inline-block; 

      a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
      }
    }
  }
}

Output:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Partials

You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @use rule.

Modules

Sass allows you to split your Sass code by using the @use rule. This rule loads another Sass file as a module, which means you can refer to its variables, mixins, and functions in your Sass file with a namespace based on the filename. Using a file will also include the CSS it generates in your compiled output!

// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

Mixins

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site.

@mixin button {
  background: #fff;
  color: #000;
}

.login-button {
    @include button;
    box-shadow: 0 0 10px gray;
}

Output:

.login-button {
  background: #fff;
  color: #000;
  box-shadow: 0 0 10px gray;
}

Extend / Inheritance

Using @extend lets you share a set of CSS properties from one selector to another.

%message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message;
}

.success {
  @extend %message;
  border-color: green;
}

.error {
  @extend %message;
  border-color: red;
}

.warning {
  @extend %message;
  border-color: yellow;
}

Output:

.warning, .error, .success, .message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Installation

There are 3 ways to install Sass, a desktop application, a library, or using the terminal.

In this article I’ll show another way, using the VSCode extension Live Sass Compiler, by Glen Marks. I like this extension because it compiles SCSS to CSS in real time using Watch Sass. Also, it provides autoprefix, for cross-browser support.

How to use Sass in WordPress

Using Sass in WordPress will make it easy for you to develop your custom theme. WordPress has a specific folder structure, so according to the theme structure:

  • We create a folder with name scss and inside it, we put all .scss files.
  • We create the main .scss file with name style.scss, which will be compiled to style.css.
    • The name of .scss file should match the name of .css!
  • If we have partials, we import them inside style.scss. Only the style.scss will be compiled.
  • The compiled style.css file must be in the root directory of the theme, as the style.css of WordPress

In the extension setting (settings.json) we should put the desired output format, the compiled file extension, and the save path. Check the format settings here.

live sass compiler format settings
Live Sass Compiler – Format settings

We also put our preferences for autoprefix. Check the autoprefix settings here.

live sass compiler autoprefix settings
Live Sass Compiler – Autoprefix settings

If all is set, you will be able to use Sass just by enabling Watch Sass, at the bottom of VSCode.

Watch Sass

A few more notes

The compilation of SCSS/Sass generates a sourcemap file with the extension .css.map. This file is used by the browser to map the final CSS file to the original SCSS files. This will help you as a developer while debugging your code, so feel free to upload it in the same directory with the .css file.

sourcemap on browser
Sourcemap on browser

More Articles

All Articles
All Articles
© Antonis Papadakis 2024. All rights reserved.