Sass

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.

Documentation

Learn about Spruce CSS through our extensive documentation.

Components

Explore our extensive UI library built with Spruce CSS.

Blog

Read about front-end development and concepts of Spruce CSS.

Find us on GitHub

Did you find a bug? Have an idea or a question? Please open an issue to help us develop the project.