Accoutrement 4.0.5

Compiling Token Maps

Tools for compiling Accoutrement map tokens, useful for exporting versions of token maps with all of the Accoutrement syntax removed.

@function map-compile()

Allows for the compilation of each token in a map, or a map and an additional source.

Since 4.0.0:

  • NEW: Provides for compilation and exporting of static version of Accoutrement maps.

Parameters & Return

$map: (map)

The map to be compiled

$source: (map | null)

A map of reference tokens

@return (map)

The parsed value of keys in the original map

Examples

scss Compile each token in a map 
$sizes: (
  'root': 16px,
  'text-size': '#root',
);

/*! #{meta.inspect(tools.map-compile($sizes))} */
css compiled 
/*! ("root": 16px, "text-size": 16px) */
scss Compile a map based on an additional source 
$sizes: (
  'root': 16px,
  'text-size': '#root',
  'display-text': '#spacer'
);

$spacing-sizes: (
  'spacer': 2rem,
);

/*! #{meta.inspect(tools.map-compile($sizes, $spacing-sizes))} */
css compiled 
/*! ("root": 16px, "text-size": 16px, "display-text": 2rem) */

Requires

@function get() [private]

@function map-compile-with()

Allows for the compilation of each token in a map, with token values resolved based on a function applied on each key-value pair.

Since 4.0.0:

  • NEW: Provides for compilation and exporting of static version of Accoutrement maps with tokens resolved based on data type.

Parameters & Return

$map: (map)

The map to be compiled

$function: (string | function)

The function to apply on each key-value pair in the map

$args...: (arglist)

Any arguments required for the function call

@return (map)

The parsed value of keys in the original map

Example

scss Compile a map using a particular function 
@use 'color';

tools.$colors: (
  'brand-blue': hsl(234, 85%, 35%),
  'dark-blue': '#brand-blue' ('shade': 30%),
);

$fn: meta.get-function('color', $module: 'color');
/*! #{meta.inspect(tools.map-compile-with(tools.$colors, $fn))} */
css compiled 
/*! ("brand-blue": hsl(234, 85%, 35%), "dark-blue": rgb(9.37125, 19.992, 115.57875)) */

Requires

@function set() [private]

Used By

@function compile-changes()

@function compile-easing()

@function compile-times()

@function compile-colors()

@function compile-ratios()

@function compile-sizes()

@function compile-fonts()