Node-Sass or Dart-Sass : The CSS Preprocessor Dilemma

More than a year ago, I answered a question on StackOverflow about choosing between Node or Dart-Sass for Vue CLI. It got lots of up-votes, and I thought maybe it is worth diving deeper into this topic.

Introduction

This article is mainly about Sass, and it’s preprocessor implementations: Dart-sass and Node-Sass.

So, what’s a CSS preprocessor?

A CSS preprocessor is a program that lets you generate CSS from the preprocessor’s unique syntax. There are many CSS preprocessors to choose from; however, most CSS preprocessors will add some features that don’t exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain.

MDN Web Docs

Sass is a stylesheet language; it’s just the syntax and definition. Dart-Sass and Node-Sass[1] are implementations. According to the Sass language website Dart Sass is the primary implementation of Sass.

Dart Sass is the primary implementation of Sass, which means it gets new features before any other implementation. It’s fast, easy to install, and it compiles to pure JavaScript which makes it easy to integrate into modern web development workflows.

If you read the paragraph above, you might decide to go for Dart-Sass over Node-Sass, and that’s easy because it looks legit. Now consider some key-points:

1. Primary implementation ✔
2. Latest features ✔
3. Compiles to pure JavaScript?
4. Easy integration because of being compiled to JS ✔

Everything looks good except the third-part. Dart-Sass is fastest but its NPM package is the JS compiled version and it’s not as fast as the dart-one.

What about Node-Sass? Node-Sass is just a wrapper over LibSass (the C implemented version of Sass).

Let’s recap what we have now (in theory at least):

• Node-Sass: Fast because of LibSass
• Dart-Sass (JS compiled version): Not fast as Node-Sass
• Dart-Sass (Dart version runs in Dart VM): the fastest

Everything we talked was about theory, let’s do some benchmarking. I use Bootstrap 4 Sass source code as our test subject:

1-Testing with DartSass (on DartVM)

Install it on Ubuntu with brew: brew install sass/sass/sass

time sass bs4/bootstrap.scss dist/bs4.css

Time elapsed: 0.21s

2-Testing with Dart Sass(Pure JS version)

Install dart-sass package: npm install --save-dev sass

.\node_modules\.bin\sass .\bs4\bootstrap.scss dist/bs4-js.css

Time elapsed: 1.992s

3-Testing with Node-Sass

Install node-sass package: nppm install --save-dev node-sass

.\node_modules\.bin\node-sass .\bs4\bootstrap.scss dist/bs4-ns.css

Time elapsed: 0.605s

Recap

In our test scenario, Dart-Sass(On DartVM) is the fastest, node-sass isn’t that bad, and Dart-Sass(Pure JS) is terrible in terms of performance.

Bootstrap Sass Compile Result with different implementations of Sass

• In this particular case, two seconds is not a big deal; but consider Dart-Sass(JS) is nine times slower than Dart-Sass(Dart VM) and three times slower than node-sass.
• I had a project with +20 themes, it took 30 seconds with node-sass, but I tried to use Dart-Sass(JS), and it took a century!
• Although Dart-Sass(Dart VM) is the fastest but installing or integrating it is a bit tricky.

Final thoughts?

In the end, It is always your decision, what implementation suits your project best, but consider:

1. For smaller or typical Sass projects, Dart-Sass(JS) is perfect, it’s easy to install without any external binding dependencies like node-sass.
2. If your sass files take time to compile and if Node-Sass supports all the features you used, then go with Node-Sass!
3. If installing Dart-Sass(Dart VM) on your machine is not a problem, Dart-Sass is the best option.
4. Also consider Node-Sass is deprecated and they won’t add new features.

Notes:

[1]: Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.