Accoutrement 2.1.1

Timing Maps: Durations & Delays

Manage all your duration & delay patterns in a single place - with explicitly documented relationships.

$times

scss
$times: () !default;

A variable storing the map of all timing globally-avialble on your project. Any times added to the $times map will be accesible 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 $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-token()

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

Requires

@function _a_map-multimerge() [private]