♻️ Sass Directions
Toolset that helps dealing with direction shorthand lists.
Real world example:
; ;; .box
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:
;// => ( 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:
;;// => 10px 20px
directions-compute
Use simple math (addition and substraction) to manipulate direction values.
Examples:
;// => 15px 25px ;// => 10px 15px ;// => 10px 20px 15px
Testing
Mocha and True are used for unit testing. Simply run npm test
to test output of the functions.