Chirp Sass Documentation

Spacing

Installation

  yarn add @chewy/kib-foundations

Import

  @use '~@chewy/kib-foundations/src/spacing';

Mixins

@mixin custom-properties($overrides) { ... }@mixin custom-properties($overrides) { 
  $spacing-properies: functions.get-properties($theme);

  @if $overrides {
    $spacing-properies: map.deep-merge($spacing-properies, $overrides);
  }

  @each $key, $value in $spacing-properies {
    #{common.get-property-name($key)}: $value;
  }
 }

Description

Generates CSS Custom Properties for a Chirp's theme set of spacings

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$overrides`	Map that overrides any matching values within the theme	`Map`	— none

Example

Apply all available properties to the :root of the page

@use '~@chewy/kib-foundations/src/spacing';

:root {
  @include spacing.custom-properties;
}

Apply properties to a selector

@use '~@chewy/kib-foundations/src/spacing';

.chirp-spacings {
  @include spacing.custom-properties;
}

Override a spacing property

@use '~@chewy/kib-foundations/src/spacing';

.chirp-spacings-custom {
  @include spacing.custom-properties($overrides: ('s3': 12px));
}

Requires

[function] get-properties
[function] get-property-name

Functions

@function -get-themes($tokens) { ... }@function -get-themes($tokens) { 
  $themes: ();

  @each $name, $theme in $tokens {
    $themes: map.set($themes, $name, map.get($theme, 'spacing'));
  }

  @return $themes;
 }

Description

Get map of all spacing themes Defined here to avoid a module loop.

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$tokens`	Spacing tokens map	`Map`	— none

Returns

Map —

Border themes definitions map

Requires

[function] get
[variable] themes

Variables

$themes: (...);$themes: -get-themes(tokens.$chirp-spacings);

Description

Map of spacing themes

Type

Map