Timing Maps: Durations & Delays
Manage all your duration & delay patterns in a single place - with explicitly documented relationships.
$times
$times: () !default;
A variable storing the map of
all times globally available on your project.
Any times added to the $times
map will be accessible
to the time()
function by default.
Define each time with a name
, base-value
,
and optional adjustments
…
$times: (
'fast': <base-value>,
'slow': <base-value> ('<function-name>': '<arguments>'),
// will return: function-name($base-value, $arguments...)
);
- Name your times anything – from abstractions like
fast
, to concrete patterns likebutton-background-hover
. - Base-values can be CSS-ready times, or references other times in the map.
- Adjustments are a nested map of functions and arguments, for adjusting times directly in your palette.
Used By
@mixin add-times()
@function time()
Access a named time in your $times
map.
Since 1.0.0
:
- NEW: Accepts
$do
map argument, for on-the-fly adjustments - NEW: Accepts
$source
map argument, for custom source-palette
Parameters & Return
$time: (string)
The name of a time in your configuration
$do: null (map | null)
A map of function/ratio adjustments to run on the returned value
$source: $times (map)
Optional Accoutrement-format map of times to use as the origin palette
@return (length)
The calculated length of time
Requires
@function get() [private]
@mixin add-times()
Merge individual time maps into the global $times
variable,
in case you want to define times in smaller groups
such as duration-times
, delay-times
, etc
before merging them into a single global times-palette.
Parameters & Output
$maps: (map...)
Pass any number of maps to be merged.
{CSS output} (code block)
- An updated global
$times
variable, with new maps merged in.
@function compile-times()
Compile all the tokens in a time map. This is particularly useful for exporting a static version of the token map with all the Accoutrement syntax removed – e.g. for use in javascript or documentation.
Since 4.0.0
:
- NEW: Provides an export option for time token maps
Parameters & Return
$map: $times (map)
The map to be compiled
$source: $times (map | null)
A map of reference tokens that can be used
for resolving times.
(defaults to the global $times
map)
@return (map)
A copy of the original map, with all token values resolved