To simplify the description of styles, browsers have designed CSS as a DSL (Domain specific Language). CSS is simple to write, but it is inconvenient in many ways. For example, it does not support nesting and the code is redundant. Does not support inheritance and mixing, code is not easy to reuse, etc.
In order to extend the code organization and dynamic computing capabilities of CSS, there are several preprocessor languages that are compiled into CSS, such as Sass, Less, Stylus, and so on.
In addition, there is postCSS, a post-processor that compiles from CSS to CSS, doing all kinds of analysis and transformation as it compiles.
The compilers of LESS and Stylus are written in JS, while the compilers of SASS are special in that they are not written in JS.
Today, we will talk about the history of SASS: sASS 3 generation compiler.
ruby sass
Sass was first developed by Ruby in 2006 as a language for writing CSS in conjunction with haML, the template engine for its Web framework. Because it is easier to use, so the front end is also used.
The SASS compiler is developed in Ruby, and Ruby is an interpreted language, so front-end developers need to install Ruby locally to compile Sass.
Later, the emergence of Node.js promoted the development of front-end engineering, that is, node.js is used to write the front-end compilation and packaging tool chain. Node.js only supports c++ extensions for compiled languages. Ruby sass does not work, so node-sass is used.
Until March 2019, Ruby Sass announced that it would no longer be maintained, and the original sass compiler was retired.
node-sass
The LibSass compiler implements sass in c++, which integrates with node, node-sass.
Of course, it can also be integrated with other languages, such as Go, Java, etc.
Node-sass allows us to compile sass code using apis in Node.js, following the trend of front-end engineering.
Also, node-sass is written in c++ and compiles much faster than ruby sass.
Node-sass is a c++ module, so install it according to the node version. Otherwise, it will compile an error.
You can view the version mapping between Node and Node-sass on Github:
Node-sass looks good, compiles fast and supports Node.js calls. Note the node version mapping, but it’s not a problem.
However, Node-Sass has been marked as obsolete, which means it, too, will slowly fade into history.
Why is that?
Mainly because the maintenance speed can not keep up.
Just as TS is a superset of JS, SASS is a superset of CSS. Supersets mean that TS Compiler needs to support new syntax for JS, and SASS needs to support new syntax for CSS, and then iterate on the syntax it adds.
The two main maintainers of the SASS team felt they were falling behind in support of new CSS features, and with the emergence of dart-Sass, a SASS compiler with better support for new CSS features, the gap in support for new CSS features has widened over time. Finally, in October 2020, Node-Sass announced that it would no longer support new features, marking dart-Sass obsolete and recommending the use of dart-Sass.
Here’s a quote on the Node-Sass blog that illustrates their frustration:
After many discussions with the Sass core team, we have come to the conclusion that it is time to officially declare LibSass and the packages built on it (including Node Sass) deprecated. For several years, it has become clear that there simply isn’t enough engineering bandwidth behind LibSass to keep up with the latest developments in the Sass language (for example, the latest new language features were added in November 2018). While we’d love to see this paradigm shift, even the excellent work of long-time LibSass contributors Michael Mifsud and Marcel Greter can’t keep up with the rapid pace of CSS and Sass language development.
As such, Node-Sass has been introduced to the stage of history, but its contribution to front-end engineering is indelible.
Let’s take a look at the successor to sASS compiler: Dart-Sass.
dart-sass
Dart-sass is unquestionably a SASS compiler written in DART. Dart is the programming language for Flutter and can be compiled to JS, so the NPM it provides is JS and does not need to be bound to the Node version like Node-sass.
The downloaded NPM package shows a sass.dart.js, which is compiled using DART:
Since dart-Sass is compiled in JS, the NPM package is slower than Node-Sass, but it is better than THE full CSS feature support, and because it is a JS package, it is easy to install.
Dart-sass represents the future and is officially the recommended SASS compiler.
Third generation SASS compiler
Having introduced three generations of compilers, let’s do a quick recap:
Ruby Sass is the original sASS compiler. It was written in Ruby, so it can’t be called by Node, but it is the first one, and the first one in history. You just need to install Ruby to do it.
Node-sass is a node package that follows the trend of front-end engineering and encapsulates the sass compiler LibSass implemented in c++. It’s faster because it’s compiled in c++. Node.js API is provided to support the trend of front-end engineering. Second on the list is historical merit. The need for node-sass and Node versions is cumbersome.
Dart-sass is a SASS compiler implemented with DART. The dart-Sass package is JS, compiled from DART. The benefit is that there is more support for new CSS features, and there is no binding to node versions.
Ruby Sass and Node-Sass are history, dart-Sass is the future of sASS compilers.
conclusion
CSS lacks code organization and dynamic computing capabilities, so there are several CSS preprocessors in the community: SASS, Less, Stylus.
The compilers of less and stylus are all written in js, and the most special one is sass, whose three generations of compilers are ruby, c++ and dart respectively, none of which are js. (This is also special in the engineering field, js compilers have evolved from JS to rust, GO, etc., while SASS compilers have evolved from other languages to JS compilers.)
Ruby Sass and Node-Sass are both outdated, but their contribution to front-end engineering is ineffable. Dart-sass represents the future of sASS compilers, and hopefully it will continue to do better.