main

functions

@function directions-assert($top: null, $right: $top, $bottom: $top, $left: $right) { ... }

Map values in clock-wise positions like CSS does it. Quoting from MDN:

One single value applies to all four sides.
Two values apply first to top and bottom, the second one to left and right.
Three values apply first to top, second to left and right and third to bottom.
Four values apply to top, right, bottom and left in that order (clockwise).

parameter Name	parameter Description	parameter Type	parameter Default value
`$top`	Shorthand list of values or single value for top	`List` or `Number` or `Null`	`null`
`$right`	Value for right	`Number` or `Null`	`$top`
`$bottom`	Value for bottom	`Number` or `Null`	`$top`
`$left`	Value for left	`Number` or `Null`	`$right`

Map —

Value(s) mapped to directions

$foo: directions-assert(10px 20px);
// => { top: 10px, right: 20px, bottom: 10px, left: 20px }

@function directions-apply($top, $right: null, $bottom: null, $left: null) { ... }

Convert mapped directions to shorthand list

parameter Name	parameter Description	parameter Type	parameter Default value
`$top`	Top value	`Map` or `Number`	— none
`$right`	Right value	`Number`	`null`
`$bottom`	Bottom value	`Number`	`null`
`$left`	Left value	`Number`	`null`

List —

Shorthand list of values

$foo: directions-apply($top: 10px, $right: 20px, $bottom: 10px, $left: 20px);
// => 10px 20px

@function directions-compute($values, $summands, $apply) { ... }

Do math with direction values

parameter Name	parameter Description	parameter Type	parameter Default value
`$values`	Map, list or value of directions	`Map` or `List` or `Number`	— none
`$summands`	Map, list or value of summands	`Map` or `List` or `Number`	— none
`$apply`	Apply directions to shorthand list, defaults to input type of ´$values´	`Boolean`	— none

Map or List —

Computed values as map or shorthand list

$foo: directions-compute(10px 20px, 5px);
// => 15px 25px

@mixin directions-print($property, $values) { ... }

Print out directions in long-form

parameter Name	parameter Description	parameter Type	parameter Default value
`$property`	The property to print directions of	`String`	— none
`$values`	Map, list or value of directions	`Map` or `List` or `Number`	— none

Input

.test {
  @include directions-print(margin, 10px 20px)
}

Output

.test {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}