@littlemissrobot/sass-spacing

Little Miss Robot - Sass spacing

This package contains logic and functionality to define and insert consistent spacing throughout the UI. This package is part of a bigger package: "@littlemissrobot/sass-system", but can be used as a standalone package.

This package does not contain or generate any CSS. It simply provides a system with @function and @mixin statement to manage spacing. It is part of the @littlemissrobot/sass-system package.

IMPORTANT

• Make use of Dart Sass:

  This library makes use of Dart Sass, which is the primary implementation of Sass. Make sure that your Sass compiler is making use of Dart Sass.

• Generate only what you need:

  This library generates classes based on your configuration. The larger the configuration, the more css, the larger the CSS file. DO NOT enable all the config options, but only the ones you actually use and need!

Install

# As a dependency
$ npm install @littlemissrobot/sass-spacing
# As a dev-dependency
$ npm install --save-dev @littlemissrobot/sass-spacing

Usage

1. Import the library from the node_modules folder:

@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-spacing" as _spacing;

1. Pass the configuration:

@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-spacing" as _spacing with (
    $baseline: 8px,
);

1. Functionality of the library is now available through the namespace _spacing.

Configuration

@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-spacing" as _spacing with (
    $baseline: 8px,
);

$baseline

• unit: px
• default: 8px
• required: true

The $baseline is the spacing baseline for determining a scale. We recommend using 8px, but if you require a smaller value, we suggest using 4px.

Functions

step($value)

Calculate a step of the $baseline, calculated in a linear pattern. By default this will return a number in rem. The value passed must be a number without a unit.

Parameters:

• $value (number): The step of the baseline

@use "@littlemissrobot/sass-spacing" as _spacing with (
    $baseline: 8px,
);

_spacing.step(1); // 0.5rem
_spacing.step(2); // 1rem