Module: Spacing

The spacing module contains mixins for adding space within and between elements. You'll find it in src/modules/_spacing.scss.

The space-inside mixin adds some horizontal padding and some bottom padding if the element is baseline-shifted by Level 4. This mixin is great for bordered or card-like components where you don't want textual or other content to go right up against the border. Optional parameters to this mixin are $sides that can set the spacing on just the selected sides, and $suffix that can be used to pick other sized padding placeholders than the default.

The space-children-horizontally mixin adds a left or right margin to all but the last item. Great for inline lists. Optional parameters to this mixin are $ltr for switching text-direction (set to false to use left margins in a right-to-left context) and $suffix that can be used to pick another sized margin placeholder than the default.

Caveats

As these mixins extend Sass placeholders from the global scope they can't be included within other scopes, like media-queries. However, if you're already doing media-queries, you probably have little use for these mixins in the component you're working on anyway (but you may be interested in using the spacing suffix variables directly).

Customizable Sass variables

At the top of the module file there are defaults for what placeholder suffix to use for utilities with xs, s, and m sized spaces. They map to fractions of the base spacing unit.