Tools
🔗
Rounding
Rounding numbers in Sass is a pain. Toolkit surfaces three functions written by Takeru Suzuki to round numbers to a specified decimal place.
Decimal Round
Round a number to specified digits.
$foo: decimal-round(0.333); // => 0
$foo: decimal-round(0.333, 1); // => 0.3
$foo: decimal-round(0.333, 2); // => 0.33
$foo: decimal-round(0.666); // => 1
$foo: decimal-round(0.666, 1); // => 0.7
$foo: decimal-round(0.666, 2); // => 0.67
Decimal Ceil
Ceil a number to specified digits.
$foo: decimal-ceil(0.333); // => 1
$foo: decimal-ceil(0.333, 1); // => 0.4
$foo: decimal-ceil(0.333, 2); // => 0.34
$foo: decimal-ceil(0.666); // => 1
$foo: decimal-ceil(0.666, 1); // => 0.7
$foo: decimal-ceil(0.666, 2); // => 0.67
Decimal Floor
Floor a number to specified digits.
$foo: decimal-floor(0.333); // => 0
$foo: decimal-floor(0.333, 1); // => 0.3
$foo: decimal-floor(0.333, 2); // => 0.33
$foo: decimal-floor(0.666); // => 0
$foo: decimal-floor(0.666, 1); // => 0.6
$foo: decimal-floor(0.666, 2); // => 0.66
Maps
Sass Maps are a really handy way of storing common values and settings, but accessing nested values can often get messy. Toolkit surfaces two functions written by Hugo Giraudel to make map access a little easier.
Map Get Deep
Access nested map values.
$menu:(
spam: (
eggs: ham,
ham: eggs
)
);
$breakfast: map-get-deep($menu, spam); // => eggs
$breakfast: map-get-deep($menu, spam, eggs); // => ham
Map Has Keys Deep
Check for keys in nested maps.
$menu:(
spam: (
eggs: ham,
ham: eggs
)
);
$breakfast: map-has-keys-deep($menu, spam); // => true
$breakfast: map-has-keys-deep($menu, ham); // => false
$breakfast: map-has-keys-deep($menu, spam, eggs); // => true
$breakfast: map-has-keys-deep($menu, spam, spam); // => false
Map Shortcuts
Color
See sky-toolkit-core/docs/settings/colors for usage.
z-index
See sky-toolkit-core/docs/settings/z-index for usage.
Conversion
Convert to EM
Converts any px or rem value to em based on the project's
$global-font-size.
$foo: convert-to-em(18px); // => 1em
$foo: convert-to-em(26px); // => 1.444444444em
$foo: convert-to-em(2rem); // => 2em
Reverse
Reverse a list of values.
$foo: reverse(1,2,3,4); // => 4,3,2,1
$foo: reverse(a 1, b 2, c 3); // => c 3, b 2, a 1
Strip Unit
Remove the unit from a value.
$foo: strip-unit(20px); // => 20