Spruce uses Sass (Syntactically Awesome Style Sheets) to generate CSS code. Sass is a popular and mature CSS extension language that lets us write stylesheets more programmatically.
Is Sass Needed to Use Spruce?
Yes, it is. Spruce uses few utility classes. It uses mixins, functions, and variables (both Sass and CSS custom properties) to give a better development experience.To get the most out of it, you should use with Sass.
You can also use it as plain CSS, but it is a simpler version, and we only recommend it for prototyping.
Why Use Sass?
Well, for this question, there is a lot of reasonable answers. In this case, we like the idea of generating only as much code as we need. With this, Sass is a great help:
- using mixins and functions, we can create valuable helpers to access various functions or generated variables.
- It is a framework (of some sort); it must be expandable and adjustable. With Sass
@use, we can easily configure the default variables and settings. - Sass is more than just nesting (an excellent feature too). We can programmatically write and generate our CSS code.
- It is evolving with new features. Also, today setup the compiling is a simple task through npm script.
Dart Sass, @use and @forward
The Spruce CSS framework uses the newest Dart Sass. Sass is a tool with great support and development, so following the latest recommendations is always a good idea.
For example, the @import statement is now deprecated, and the @use, @forward, takes its place.
For more information about this change, please visit the official documentation.