How to...

Use our Sass files to take advantage of variables, maps, mixins, and more.

File structure

It's highly recommended to avoid modifying core files, this means that you need to create your own stylesheet.
For Sass, it's recommended to create a new stylesheet that imports the Design System so you can modify and extend it. Assuming you’re using a package manager like npm, you'll have a file structure that looks like this:

Your-project/
    └── node_modules/
        └── @visma-spcs-registry/designsystem/
            └── dist/
                ├── css      Compiled CSS files. Includes minified files.
                └── fonts    Fonts that you might need
                └── img      Images used in the Design System library
            └── src/
                ├── js       Some source JavaScript files for those who need them.
                └── scss     Source Sass files. Use this folder as a load path in Sass.

If you downloaded our source files and you are not using a package manager, you need to manually setup something similar to that structure, keeping the Design System's source files separate from your own.

Your-project/
    ├── scss/
    │   └── your-custom-styling.scss
    └── vud/
        ├── js
        └── scss

Importing

In your sass file your-custom-styling.scss, you need to import the Design System's source Sass files. You have two options: include all the Design System styles or choose only the parts you need.

// Option 1 - All Design System styles
@import "~@visma-spcs-registry/designsystem/src/scss/spiris.light-dark.mode";


// Option 2 - Only the parts your need (eg. buttons)
// 1. Include functions first
@import "~@visma-spcs-registry/designsystem/src/scss/utilities/functions";

// 2. Include any custom variable overrides here
@import "../path-to-file/your-custom-vars.scss";

// 3. Include required Design System styles
@import "~@visma-spcs-registry/designsystem/src/scss/settings/all";

// 4. Include any Design System stylesheet needed
@import "~@visma-spcs-registry/designsystem/src/scss/base/all";
@import "~@visma-spcs-registry/designsystem/src/scss/elements/buttons";
// or
@import "~@visma-spcs-registry/designsystem/src/scss/base/reboot";
@import "~@visma-spcs-registry/designsystem/src/scss/base/typography";
@import "~@visma-spcs-registry/designsystem/src/scss/base/local-fonts";
@import "~@visma-spcs-registry/designsystem/src/scss/elements/buttons";

Un-used CSS

We don't have a prebuilt example for using PurgeCSS with our library, but here are some helpful articles: