Skip to main content
Rivet Design System Indiana University

Using Rivet Sass

How to import Sass styles from Rivet's npm package

Sass is a language for writing stylesheets that enhances the syntax and functionality of CSS. Rivet styles are written using Sass and then compiled to regular CSS during the build process.

Developers using the rivet-core npm package have direct access to Rivet’s Sass files and can import them into their own stylesheets. The package also allows developers to use Rivet Sass variables related to spacing, color, typography, and other styles.

This page will describe how to import Rivet Sass, customize which styles are imported, and use Rivet Sass variables.

Importing Sass #

To import Rivet Sass into your own stylesheets, paste the following code at the top of your project’s main .scss file:

@use "rivet-core/sass/core" as *;
@use "rivet-core/sass/defaults";
@use "rivet-core/sass/utilities";
@use "rivet-core/sass/accordion";
@use "rivet-core/sass/alerts";
@use "rivet-core/sass/avatar";
@use "rivet-core/sass/badges";
@use "rivet-core/sass/billboard";
@use "rivet-core/sass/breadcrumb";
@use "rivet-core/sass/buttons";
@use "rivet-core/sass/buttons-segmented";
@use "rivet-core/sass/card";
@use "rivet-core/sass/checkboxes";
@use "rivet-core/sass/cta";
@use "rivet-core/sass/dialog";
@use "rivet-core/sass/dropdown";
@use "rivet-core/sass/file-input";
@use "rivet-core/sass/footer-system/footer-common";
@use "rivet-core/sass/footer-system/footer-base";
@use "rivet-core/sass/grid";
@use "rivet-core/sass/hero-area";
@use "rivet-core/sass/header-system";
@use "rivet-core/sass/input-group";
@use "rivet-core/sass/inputs";
@use "rivet-core/sass/layout";
@use "rivet-core/sass/link-hub";
@use "rivet-core/sass/links";
@use "rivet-core/sass/lists";
@use "rivet-core/sass/loading-indicator";
@use "rivet-core/sass/pagination";
@use "rivet-core/sass/quote";
@use "rivet-core/sass/radios";
@use "rivet-core/sass/sidenav";
@use "rivet-core/sass/stat";
@use "rivet-core/sass/stat-group";
@use "rivet-core/sass/step-indicator";
@use "rivet-core/sass/subnav";
@use "rivet-core/sass/switch";
@use "rivet-core/sass/tables";
@use "rivet-core/sass/tabs";
@use "rivet-core/sass/timeline";
@use "rivet-core/sass/validation";

/* Your project's styles start here ... */

When you compile your project’s CSS as part of your build process, all Rivet styles will be copied from the npm package into your main .css file.

Customizing imports #

You may only be using a subset of Rivet components or utilities in your project. In these situations, you can reduce the size of your compiled CSS by including only the parts of Rivet you need.

To exclude a Rivet Sass file from your project, use the double slash (//) syntax to comment out the @use statement you’d like to ignore. (In Sass, lines commented out using // are never emitted in compiled CSS.)

@use "rivet-core/sass/core" as *;
@use "rivet-core/sass/defaults";
@use "rivet-core/sass/utilities";
// @use "rivet-core/sass/accordion";
@use "rivet-core/sass/alerts";
// @use "rivet-core/sass/avatar";
@use "rivet-core/sass/badges";
@use "rivet-core/sass/billboard";
@use "rivet-core/sass/breadcrumb";
@use "rivet-core/sass/buttons";
// @use "rivet-core/sass/buttons-segmented";
@use "rivet-core/sass/card";
// @use "rivet-core/sass/checkboxes";
@use "rivet-core/sass/cta";
// @use "rivet-core/sass/dialog";
@use "rivet-core/sass/dropdown";
// @use "rivet-core/sass/file-input";
@use "rivet-core/sass/footer-system/footer-common";
@use "rivet-core/sass/footer-system/footer-base";
@use "rivet-core/sass/grid";
@use "rivet-core/sass/hero-area";
@use "rivet-core/sass/header-system";
@use "rivet-core/sass/input-group";
@use "rivet-core/sass/inputs";
@use "rivet-core/sass/layout";
// @use "rivet-core/sass/link-hub";
@use "rivet-core/sass/links";
@use "rivet-core/sass/lists";
@use "rivet-core/sass/loading-indicator";
@use "rivet-core/sass/pagination";
// @use "rivet-core/sass/quote";
@use "rivet-core/sass/radios";
@use "rivet-core/sass/sidenav";
// @use "rivet-core/sass/stat";
// @use "rivet-core/sass/stat-group";
@use "rivet-core/sass/step-indicator";
@use "rivet-core/sass/subnav";
@use "rivet-core/sass/switch";
@use "rivet-core/sass/tables";
@use "rivet-core/sass/tabs";
// @use "rivet-core/sass/timeline";
@use "rivet-core/sass/validation";

/* Your project's styles start here ... */

Using variables #

You can use Rivet’s Sass variables in your own style declarations. This can help your project-specific elements appear more similar to Rivet’s built-in components.

To view a complete list of Rivet Sass variables, see the design tokens page.

.rvt-c-my-style {
  background-color: $color-black-200;
  box-shadow: $shadow-standard;
  margin: 0 auto;
  padding: $spacing-xxl;
  width: 100%;
}