SASS for WordPress developers: here’s everything you MUST know

Although CSS can be fun, using proper preprocessors like SASS (Syntactically Awesome Stylesheet) – not to be confused with being sassy – will make the job of the developer even easier.

If you’re wondering why exactly you need Sass and what it’ll give you, buckle up, cause we’re going to cover all the aspects of Sass in WordPress and go over its additions one by one. But first of all, let’s make a few definitions clear.
What is Sass?

Basically, Sass is a CSS preprocessor which makes writing with CSS neater and more comprehensible, and that can solve a lot of problems. It’s a very useful tool to incorporate into your projects to make your workflow faster and better organized.

So, starting from the basics:

In which cases will WP developers benefit from Sass?

In short, in all the cases. If you want your code to be cleaner and significantly easier to follow, Sass for WordPress is indispensable.

If you want to code faster and avoid spending too much time on tedious repetitions, again, Sass comes to help. Basically, it’s like a shortcut to better coding. Talking about shortcuts, don’t forget to check out our blog on the 68 keyboard shortcuts for WordPress to make your overall workflow with WordPress more efficient.

Is Sass too much for a WP plugin?

Sometimes if you’re working on a small website or just creating a WP plugin, Sass can be a little too much. Although it definitely saves your time in many ways, it can still be a bit of an overkill.

That being said, don’t forget that Sass uses the same syntax as CSS, so at the end of the day, it’s just a tool to add extra functionality to your CSS and won’t hurt at all, no matter the size of your project, just one time clsetup and configuration should be made for Sass.

What additions does SASS bring to CSS?

These are the features Sass adds to CSS to make your work easier:

• Variables
• Nested rules
• Partials
• Modules
• Mixins
• Extends/inheritance
• Operators

These are the additions through which Sass makes your work easier. We’ll discuss each feature in more detail below:

Variables

One of the most important features of Sass in WordPress is that it allows you to use variables. This lets you define a value and store it in a variable in order to use it in your Style files later on. Although it’s a simple tool, having it at your disposal significantly facilitates your workflow.

So, let’s say you want to use the same color or font or any other CSS value throughout your coding. Just store it in a variable and then reuse it whenever you want to. Remember that SASS uses the $ symbol for the variable. Here’s an example of variable use in Sass vs CSS:

SCSS SASS

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

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


CSS 

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

As you see, with Sass, you can define the $font-stack and $primary-color variables in the beginning and then use the variable throughout your code. For instance, if you’re doing a project where you should use brand colors in every second line of the code, using the variable will make your work easier, as you won’t have to write the value stored in it every time, like in CSS.

Nested rules

Sass also comes in handy when you need to make your code more readable. In HTML, for example, there’s a very clear visual nested hierarchy which CSS lacks. With Sass, you can nest your CSS selectors in the same way as you can in HTML. Here’s an example of nesting used in SASS:

SASS 

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

  li { display: inline-block; }

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


CSS 
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

As you can see, the ul, li, and a selectors get nested inside the nav selector, which makes your CSS code more organized, clean, and easy to read.

Partials

As you know, browsers only read JS, CSS, and HTML languages which means that in the end you need to convert your Sass code to CSS to make it compatible with the browsers. Here is where compilers come in handy. Once your Sass compiler is installed and configured, you can convert Sass to CSS using the sass command in your terminal.

Then you can tell your Sass which file you want to build from and where to output your CSS. For instance, if you run sass input.scss output.css in your terminal it would take a single file (the input.scss) and convert it to a CSS file (the output.css).

Now, in Sass you can decide how you want your files to be compiled. You have the ability to create partial Sass files that have small snippets of CSS that you can later include in other Sass files.

This way, you can choose whether you want your files to be compiled individually, or you want to work on them separately but then convert them into a single file. If you choose the latter, you can use the partial Sass file by using the underscore _partial.css in the name of your file.

This underscore tells Sass that the file is a part of a larger file and should not be turned into a separate CSS file. You can use the partial Sass files using the @import or @use rule. Here’s a more detailed explanation of how the @import rule works.

In short, partials are a great way to organize your Sass in WordPress files and maintain a good file architecture. It also saves you a bunch of time trying to find the right styles to modify. One useful pattern you can try to follow for your folders and files is the 7-1 pattern introduced by Hugo Giraudel.

sass/
|
|– abstracts/
|   |– _variables.scss    # Sass Variables
|   |– _functions.scss    # Sass Functions
|   |– _mixins.scss       # Sass Mixins
|   |– _placeholders.scss # Sass Placeholders
|
|– base/
|   |– _reset.scss        # Reset/normalize
|   |– _typography.scss   # Typography rules
|   …                     # Etc.
|
|– components/
|   |– _buttons.scss      # Buttons
|   |– _carousel.scss     # Carousel
|   |– _cover.scss        # Cover
|   |– _dropdown.scss     # Dropdown
|   …                     # Etc.
|
|– layout/
|   |– _navigation.scss   # Navigation
|   |– _grid.scss         # Grid system
|   |– _header.scss       # Header
|   |– _footer.scss       # Footer
|   |– _sidebar.scss      # Sidebar
|   |– _forms.scss        # Forms
|   …                     # Etc.
|
|– pages/
|   |– _home.scss         # Home specific styles
|   |– _contact.scss      # Contact specific styles
|   …                     # Etc.
|
|– themes/
|   |– _theme.scss        # Default theme
|   |– _admin.scss        # Admin theme
|   …                     # Etc.
|
|– vendors/
|   |– _bootstrap.scss    # Bootstrap
|   |– _jquery-ui.scss    # jQuery UI
|   …                     # Etc.
|
`– main.scss              # Main Sass file

Modules

Now when you split up your Sass into different parts with the @use rule, it will start to load the Sass file as a module. That is you can refer to its variables, functions, and mixins in your Sass files with the help of namespace which is based on your file’s name. Тhe file you use will also include the CSS generated in your output file.

 

Sass
// _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;
}
 
 
CSS
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
 
.inverse {
  background-color: #333;
  color: white;
}

As you can see, this makes your workflow more organized as you can define variables in separate files and then import them into a different Sass file.

Mixins

Another useful feature in Sass are the mixins. There are a lot of aspects in CSS which make code writing a little tedious. A mixin helps you avoid it by creating a group of CSS declarations which you can later on reuse throughout your coding. There’s also the ability to pass in certain values in order to make your mixin even more flexible. One example when mixin use is appropriate is the vendor prefixes. Let’s take the example of transform.

Sass
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }
 
CSS 
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

In order to create a mixin, you should use the @mixin directive and then name it. In this example our mixin is named transform. There is also the $property variable which is inside the parentheses to let us pass in a transform or basically anything else we want.

Once your mixin is created, you can use it as a CSS declaration which starts with @include and then is followed by the name of the mixin.

Extends/Inheritance

Finally, one of the most useful features of Sass is the @extend. This feature helps you share a group of CSS properties of one selector with another.

Unlike the @mixin which basically copies different styles into the current style rule, @extend is used to update the style rules which contain the extended selectors for them to contain the extending selectors, too. When Sass extends the selectors, it unifies them intelligently, meaning :

• It will never make selectors like #main#footer which cannot match any elements.
• It will ensure that the complex selectors stay interleaved, so that they can work despite of the order of nested HTML elements.
• It will get rid of the excessive selectors as much as it can, but still ensure that specificity stays equal to or greater than that of the extender.
• It can tell when the selector matches all the things the other does and can combine the two of them together.
• It will intelligently handle the combinators, pseudo-classes, and the universal selectors which contain the selectors.

Here’s an example from Sass:

Sass -> CSS 
.content nav.sidebar {
  @extend .info;
}
 
// This won't be extended, because `p` is incompatible with `nav`.
p.info {
  background-color: #dee9fc;
}
 
// There's no way to know whether `<div class="guide">` will be inside or
// outside `<div class="content">`, so Sass generates both to be safe.
.guide .info {
  border: 1px solid rgba(#000, 0.8);
  border-radius: 2px;
}
 
// Sass knows that every element matching "main.content" also matches ".content"
// and avoids generating unnecessary interleaved selectors.
main.content .info {
  font-size: 0.8em;
}

Here’s another example where a set of messaging for errors, warnings, and successes is created using the placeholder classes which go along the extend feature.
Basically, a placeholder is a special type of class which is only printed when it’s extended. In the end you can compile your CSS in a neat and clean way. Let’s take a look at the example below:

 
Sass -> CSS 

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
 
// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}
 
.message {
  @extend %message-shared;
}
 
.success {
  @extend %message-shared;
  border-color: green;
}
 
.error {
  @extend %message-shared;
  border-color: red;
}
 
.warning {
  @extend %message-shared;
  border-color: yellow;
}

So, what do we see in this example? The code tells us that .message, .success, .error, and .warning should behave just like the %message-shared. In other words, anywhere you see the %message-shared, the .message, .success, .error, and .warning will also show up. And in the generated CSS, each of the classes will have the same properties as the %message-shared. In the end, you won’t have to write too many class names on the HTML elements.

In addition to placeholder classes, although you could extend most of the simple CSS selectors, we still recommend using the placeholders in Sass as it’s the easiest way to ensure that the class you’re extending is not nested somewhere else in your styles, which would cause unintended selectors in the CSS.

Small note:
%equal-heights is not generated because %equal-heights can never be extended.

Operators

The last feature in our list is the operators. Sometimes it’s very helpful to do the math in your CSS, and that’s why this Sass feature adds a number of useful math operators, such as +,-,*,/ and %. In the example below you’ll find some simple math calculations to find the width for aside & article.

SCSS SYNTAX
.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}
 
CSS OUTPUT
.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

In this example, we’ve made a simple fluid grid which is based on 960 px. With operations in Sass, we convert pixel values to percentages without too much of a hassle.

FAQs

In short, even though CSS has everything you need for creating a stunning website, using CSS preprocessors like Sass will make the process of creation much easier and hassle-free. Sass for WordPress makes the CSS much more powerful by letting the developers use a bunch of useful features such as variables, nested rules, mixins, modules, partials, extends/inheritance and operators. In the end it will compile your code and provide a CSS output for the browser to be able to read it.

See How 10Web Can Benefit You

Visit our homepage to learn more about the ultimate AI-powered website builder.

FIND OUT MORE