How to Start Using Sass with WordPress Through NPM Scripts

For any web developer, the word CSS is not something new. Despite the fact that CSS is an awesome programming/styling language, it comes with certain limitations which cannot be ignored. Thankfully, the CSS preprocessor languages like Syntactically Awesome Syle Sheets (Sass) and LESS have saved the day.

In today’s post, I’m going to explain how you can use Sass with WordPress through NPM Scripts and provide you with an easy to use boilerplate. Let’s start with the basics.

What is Sass?

Sass is a CSS preprocessor language that helps developers write CSS in a better and more meaningful way. With Sass, you can integrate with features CSS does not support. These include basic math operators, mixins, nesting, variables, etc. Imagine using variables in CSS, for font-size, or theme colors. Sass makes that easy.

How Does Sass Works?

Being a preprocessor language, Sass performs a similar function like any such language would do. E.g. PHP preprocesses a script and generates an HTML output. So, Sass preprocesses .scss files and generates .css files as a result.

Now your CSS files can be rendered by any browser. This part remains the same while using Sass. However, the difference is that you no longer write CSS directly. Instead, you write Sass and it is then preprocessed into a CSS file. Also, don’t worry, Sass is a lot like CSS itself.

How is Sass Different from Normal CSS?

Overall Sass is quite similar to CSS but offers a few differences. Some of these are:

• The SCSS version of Sass is quite similar to CSS. You won’t have to learn anything new there except for a few things related to how to create variables and the mixins. The base syntax remains the same.
• Sass uses nesting and indentation. This eliminates the need of descendant selectors which create several layers of code.

What Benefits Does Sass Bring to CSS?

Sass is an incredibly easy-to-learn language. Technically speaking, it is considered to be the most powerful professional grade CSS extension which brings several benefits like:

• You can create variables, nesting, mixins, import, partials, mathematical and logical operators, etc.
• You can add dynamicity to your development process.
• You can write better modular code. And modifying it becomes very easy.

Getting Started with Sass

So, before you get started with this tutorial, let me share with you a boilerplate called WPSass (go ahead and star it) — which will get you set up for your project. I am going to explain how you can use it. If you have any issues, report to the GitHub repo and PR’s are welcome. By the way, I’d recommend you to star and watch the repository as it will improve over time.

Let’s Get Started!

To get started using Sass with WordPress you need to make sure that you have node installed. If not then you must download and install node first.

Step 1: Install NodeJS & NPM

After installing NodeJS you can verify the installation of both NodeJS and Node Package Manager (NPM) by typing the following commands. Once you’ve done this, you never have to do it again.

node -v
# v7.10.0

npm -v
# 4.2.0

Step 2. Download package.json

Next, you’ll download the package.json file inside the root folder of your WordPress plugin or theme. If you have cURL installed then you can run the following command to download it in one go (just make sure you open the root folder of your WordPress plugin or WordPress theme and download the package.json file in it).

curl -L 'https://git.io/wpsass' -o package.json

Step 3: Installing Node Dependencies

At this point, we are in the root folder of our WordPress plugin or theme. Now it’s time to install the Node Dependencies. In the terminal run the following command and wait for it to download all the NodeJS dependencies. Once again, it’s a one time process and can take about a minute depending on the internet speed.

# For MAC OS X run the following command with super user
sudo npm install

# For Linux run the following command
npm install

Step 4: Configure NPM Scripts

Now we are going to configure the NPM scripts. There are only two of them. If you open the package.json file, you’ll find two such scripts there i.e.

"scripts": {
  "css": "node-sass --output-style compressed --include-path scss assets/css/source.scss style.css",
  "watch": "nodemon -e scss -x \"npm run css\""
},

While you are working with your own css script, you’ll need to change the following:

• SCSS Source File Path & Name — assets/css/source.scss
• Destination CSS File Path & Name — style.css

NOTE: That currently, this little app has following file structure:

├── assets
    |  └── css
    |     ├── partial
    |     |  ├── base.scss
    |     |  └── variables.scss
    |     ├── source.scss
    |     └── vendor
    |        └── normalize.css
    ├── index.html
    ├── package.json
    └── style.css

Here, source.scss is the source file for the SCSS files, which imports files from partials and vendor directory. This gets compiled into a style.css file in the root of our project as configured in the npm script.

Step 5: Run NPM Scripts

All that’s left now is for you to run the NPM script in the root folder of your WP project — where you downloaded the package.json file.

NOTE: Before you run, make sure there is a source SCSS file included. Otherwise running the script will display this error An output directory must be specified when compiling a directory.

# Compile CSS.
npm run css

# Watch changes in SCSS files and compile CSS automatically.
npm run watch

Conclusion

For more than two decades I have had been using CSS to build websites, like everyone else. But the moment I was introduced to Sass, about four years ago, I instantly turned to it. Likewise, many web developers have stepped up their game by showing their interest in Sass for WordPress theme and plugin development. It is now your turn. If you’ve have been still waiting to jump the ship, it doesn’t get any easier than this WPSass boilerplate.

As usual, don’t hesitate to leave any questions or comments below, and I’ll aim to respond to each of them.