♻️ Sass Directions

Toolset that helps dealing with direction shorthand lists.

Real world example:

@import "sass-directions/directions";
 
$padding: 10px 20px;
$border-width: 1px;
 
.box {
    padding: directions-compute($padding, -$border-width);
    border: $border-width solid;
}

Installation

Using NPM
npm install sass-directions

Using yarn
yarn add sass-directions

Without packet manager
You can always just copy-paste _directions.scss into your project and import it.

Functions

directions-assert

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).

Example:

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

directions-apply

Convert a map of <direction>: <value> pairs to shorthand list.
The examples below produce the same output.

Example:

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

directions-compute

Use simple math (addition and substraction) to manipulate direction values.

Examples:

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

Testing

Mocha and True are used for unit testing. Simply run npm test to test output of the functions.