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 like
button-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
$domap argument, for on-the-fly adjustments
- NEW: Accepts
$sourcemap 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
$timesvariable, with new maps merged in.
Requires
@function multi-merge()
@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