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
- Why use Sass
- Sass syntax
- Sass basics
- Installation
- How to use Sass in WordPress
- A few more notes
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: #000I 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.
We also put our preferences for autoprefix. Check the autoprefix settings here.
If all is set, you will be able to use Sass just by enabling Watch Sass, at the bottom of VSCode.
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.
