Welcome to Chirp Sass Documentation

Sass Library

Our style packages are built using dart-sass >=1.23.0. This version is required in order to support the use of SASS modules.

yarn add sass

Sass Modules

When using modules, the @use rule replaces the @import rule, which places all the file's variables, mixins, and functions inside a namespace.

Usage

By default, the namespace is created from the end of URL path:

@use '~@chewy/kib-layout-styles/src/kib-container/styles/kib-container';

.my-layout-container {
  @include kib-container.base;
}

This can be set explicitly using an as keyword:

@use '~@chewy/kib-layout-styles/src/kib-container/styles/kib-container' as content-container;

.my-layout-container {
  @include content-container.base;
}

Overriding Module Variables

You can override variable values by specifying the changes within the @use statement using the with keyword:

@use '~@chewy/kib-cards-styles/src/kib-ingress-card/styles/kib-ingress-card' with (
  $background-color: $your-custom-color,
  $radius: 0,
  $icon-size: 3.8rem
);