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 a 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 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 are 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
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.
