Spruce CSS is built on Sass; to get the full potential, you should use with it. If you want, you can load the compiled CSS too, but you will lose many features.

Install with NPM

bash
npm install sprucecss --save

Install with Yarn

bash
yarn add sprucecss

Install Manually

Download the latest release, find the dist folder at the root (the compiled files), and use the preferred CSS file (minified, regular).

html
<link href="spruce.min.css" rel="stylesheet">
<link href="spruce.css" rel="stylesheet">

Using Spruce CSS with Sass

The manageability of Spruce CSS comes from its Sass features which are variables, mixins, and functions. You should use the preprocessor for the proper workflow (e.g., overwriting the default variables).

With the help of the mixins and functions, you can write code and access values easier.

Import It With @use

To import it into your project, you must use Sass’s @use, a newer type of @import similar to the JavaScript modules. Unlike using @import, you have to import (use it) it in every file where you want to use Spruce, its variables, functions, or mixins.

scss
@use '~sprucecss/scss/spruce';

Namespacing

The @use rule loads the mixins, functions, and variables in a namespaced way. If you use the import above, you can refer to the Spruce assets using the “spruce” namespace like so:

scss
.section {
  @include spruce.layout-stack(spruce.spacer(m));
}

We include the layout-stack mixin in this example and use the spacer function to get the “m” sized spacer.

If you don’t want to use namespacing, you have to import like the following:

scss
@use '~sprucecss/scss/spruce' as *;


.section {
  @include layout-stack(spacer(m));
}

Although the namespacing doesn’t necessary for a simple project, we will show you the examples this way because we like the idea and think it is more future proof.

The tilde ~ character means (at the @use) a shorthand to the node_modules folder in a Webpack configuration, so you don’t have to use a relative path.

If you need a simple Sass compile setup, check out our article on Pine.

Load Styles

Importing Spruce means you load its variables, functions, and mixins. To use its styles, you have to include them with a mixin explicitly.

To load the styles, you need to include a generator mixin. A generator (a naming convention in Spruce CSS only) mixin is a wrapper mixin whose goal is to import a specified style, usually once in your project. These are complete declarations with selectors, so you can’t use them inside code blocks.

You can control the flow of the style generation in a lot of ways (for more information, please visit our Generators page), but there are two main mixins to use:

scss
@use '~sprucecss/scss/spruce';


@include spruce.generate-content;
@include spruce.generate-form;

Compiling Sass

Depending on your development setup, using Sass could be a burden. We think that Sass is a handy tool and easy to use. One of the more significant barriers is compiling; because of this reason, we wrote an article about a simple Sass compile setup.

Also, we made a Spruce CSS Starter Kit which is a starter template. It includes a basic compile setup and, of course, Spruce CSS. You can find more information about it on GitHub.