PostCSS vs. SASS: Why You Should Use PostCSS With Vue (+ How)

Since its inception, SASS (otherwise known as Syntactically Awesome Style Sheets) has taken the Web Development world by storm.

Built as an extension language to CSS, this preprocessor scripting language allowed Developers to leverage simple programming concepts such as conditional statements and variables for writing CSS, and as a result, working with CSS became so much more enjoyable.

The thing is, it might not be necessary to need SASS anymore as PostCSS has grown to be a sufficient replacement.

And sure I've seen developers use both, but PostCSS has a massive ecosystem of plugins that can replicate the features available in SASS, while also avoiding some of the common issues that SASS suffers from...

The problems with SASS (and preprocessors)

The biggest gripe with SASS and preprocessors in general, is that they're not easily extendable.

Need something more than what's offered? Well then now you're at the mercy of the preprocessor.

Even worse? This lack of features can lead to bad practices that slowly creep into your application. 👎

Fortunately, we can use now PostCSS instead to get around these issues.

What is PostCSS?

PostCSS is a JavaScript library that transforms CSS into JavaScript.

Yep, you heard that right!

CSS is transpiled into an abstract syntax tree, which is then represented with JavaScript objects.

This transformation allows developers the opportunity to manipulate the CSS through those objects. Then, after our CSS has been processed, the objects are converted back into valid CSS.

Awesome right?

And don't worry because by itself, PostCSS will not do anything to our CSS. It's up to plugins to apply these changes, but we can pick and choose which features we need for our project.

And as it stands, there are hundreds of plugins available and no shortage of options.

Using PostCSS with Vue

So let's walk through how to set this up.

If you're installing a fresh Vue project with the npm init vue@latest command, then PostCSS is already available in your Vue projects.

Alternatively, you can use Stackblitz to follow along with me and set it up.

Behind the scenes, Vue uses PostCSS to scope your CSS.

By adding the scoped attribute to the <style> tag of a component, Vue will encapsulate your styles to the component. This entire process is performed with PostCSS.

Want to start using additional PostCSS plugins?

PostCSS is configurable with various options, so let's break a few of them down.

Firstly, separate configuration files can be created called postcss.config.js or postcss.config.json.

Alternatively, you can modify the vite.config.js file, which supports the PostCSS configuration.

💡 Tip:

You may want to outsource your configuration into a separate file to prevent bloat from the main configuration file.

From the Vite configuration file, you can add the css.postcss property to start configuring PostCSS.

I recommend referring to the PostCSS documentation for a complete overview of the various settings that can be added, but here's what a minimum configuration looks like:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
    }
  }
})

And if you have a soft spot for SASS then no problem at all because we can actually import or replicate some of the features from SASS by using plugins!

Like what?

Well here's 2 of the most common SAAS features that you can duplicate with plugins.

1. Nested Selectors

Nested selectors are a prevalent feature in SASS that can be made available with PostCSS, via a plugin called postcss-nested.

We can install it with the following command:

npm install --save-dev postcss-nested

After installing this package, the plugin needs to be registered with PostCSS by updating the configuration like so:

export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [require('postcss-nested')],
    },
  },
});

Any plugin can be registered by importing it into the plugins option. This option is above is for an array of plugins.

Let's update the App.vue component with the following template:

<template>
  <button class="primary">Press me</button>
</template>

Next, in the <style> block, add the following CSS:

button {
  display: block;
  color: #fff;
  outline: none;
  font-size: 20px;
  padding: 10px 50px;

  &.primary {
    border-color: #7367f0;
    background-color: #7367f0;
  }
}

In SASS, we can add nested selectors that will be converted into valid selectors, but with PostCSS we don't need to add SASS into the mix.

In addition, the & selector is supported, which allows us to use the parent selector.

Nested selectors clarify how styles are organized and related to one another.

Pretty cool right?

Well here's another SAAS feature that we can replicate in PostCSS.

2. The Each Loop

Looping is another popular feature of SASS that's easily replicated with a PostCSS plugin called postcss-each.

We can install this plugin with the following command:

npm install --save-dev postcss-each

Next, we have to update the PostCSS configuration in the vite.config.js file by adding the plugin to the css.postcss.plugins array.

export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [require('postcss-nested'), require('postcss-each')]
    },
  },
});

We can then begin looping through values by using the @each keyword.

After this keyword, we can define a variable representing each item, but keep in mind-the variable must be prefixed with the $ character.

For example

Let's try updating the button CSS to the following:

button {
  display: block;
  color: #fff;
  outline: none;
  font-size: 20px;
  padding: 10px 50px;

  --primary: #7367f0;
  --success: #28c76f;
  --danger: #ea5455;
  --warning: #ff9f43;

  @each $val in primary, success, danger, warning {
    &.$(val) {
      background-color: var(--$(val));
      border-color: var(--$(val));
    }
  }
}

In the above example, we have four CSS variables for storing colors, and below these variables, we're jumpstarting a loop on the variables.

Also, inside the loop's body, we're defining a new class by interpolating the name with the following syntax $().

Here's how this plugin works:

The plugin will interpolate the variable with the current value in the iteration. In this example, we are creating classes for each variable while changing the border-color and background-color properties with the respective variable.

So which should you use? PostCSS or SASS?

As you can see, PostCSS more than serves as an adequate replacement for SASS, and has everything a developer wants:

• a thriving community
• an extensive plugin system
• an extendable and solid documentation
• the option to replicate many SASS features
• and without any of the common issues with SAAS!

In my opinion, you can't go wrong with using PostCSS in your Vue or JavaScript-related projects.

Want to avoid PostCSS altogether and try another option?

Alternatively, you can also consider checking out TailwindCSS, which is a library built on top of PostCSS plugins.

If you're interested in learning more about Tailwind, along with a practical application, then I have a lecture in the Vue course called What is Tailwind?.

Or another option thats equally as good:

Here's a teaser from my Complete Vue Developer course. In the video below I walk you through how to build your first app with Vue!