Accoutrement 4.0.4

Pre-Registered Functions

We provide a number of pre-registered functions to help with token management, including:

Example

scss 
$sizes: (
  'text': 14px 16px 24px,
  'small': '#text' ('list.nth': 1),
  'medium': '#text' ('list.nth': 2),
);
/*! small: #{tools.get($sizes, 'small')} */
/*! medium: #{tools.get($sizes, 'medium')} */
css compiled 
/*! small: 14px */
/*! medium: 16px */

@function plus()

Add two values together in Accoutrement maps.

Available in all Accoutrement maps as 'plus', 'add', or '+'.

Since 4.0.0:

  • BREAKING: Renamed from _a_plus to plus
  • NEW: Available for direct usage

Parameters & Return

$num1: (string | length)

The name or length of the size you are adding to

$num2: (string | length)

The name or length of the size being added

@return (number)

The calculated results of adding $num1 and $num2

Example

scss 
$sizes: (
  'text': 16px,
  'margin': 14px,
  'spacer': '#text' ('plus': '#margin'),
);
/*! spacer: #{tools.get($sizes, 'spacer')} */
css compiled 
/*! spacer: 30px */

@function minus()

Subtract one value from another in Accoutrement maps.

Available in all Accoutrement maps as 'minus', 'subtract', or '-'.

Since 4.0.0:

  • BREAKING: Renamed from _a_minus to minus
  • NEW: Available for direct usage

Parameters & Return

$num1: (string | length)

The name or length of the size you are subtracting from

$num2: (string | length)

The name or length of the size to subtract

@return (number)

The calculated results of subtracting $num2 from $num1

Example

scss 
$sizes: (
  'text': 16px,
  'margin': 14px,
  'shim': '#text' ('minus': '#margin'),
);
/*! shim: #{tools.get($sizes, 'shim')} */
css compiled 
/*! shim: 2px */

@function times()

Multiply two values in Accoutrement maps.

Available in all Accoutrement maps as 'times', 'multiply', or '*'.

Since 4.0.0:

  • BREAKING: Renamed from _a_times to times
  • NEW: Available for direct usage

Parameters & Return

$num1: (string | length)

The name or length of the size you are multiplying

$num2: (string | length)

The name or length of the size to use as a multiple

@return (number)

The calculated results of multiplying $num1 by $num2

Example

scss 
$sizes: (
  'text': 16px,
  'double': '#text' ('times': 2),
);
/*! double: #{tools.get($sizes, 'double')} */
css compiled 
/*! double: 32px */

@function divide()

Divide two values in Accoutrement maps.

Available in all Accoutrement maps as 'divide', or '/'.

Since 4.0.0:

  • BREAKING: Renamed from _a_divide to divide
  • NEW: Available for direct usage

Parameters & Return

$num1: (string | length)

The name or length of the size you are dividing

$num2: (string | length)

The name or length of the size to use as a division

@return (number)

The calculated results of dividing $num1 by $num2

Example

scss 
$sizes: (
  'text': 16px,
  'half': '#text' ('divide': 2),
);
/*! half: #{tools.get($sizes, 'half')} */
css compiled 
/*! half: 8px */

@function modulo()

Divide two values in Accoutrement maps, and return the remainder.

Available in all Accoutrement maps as 'modulo', 'remainder', 'mod', or '%'.

Since 4.0.0:

  • BREAKING: Renamed from _a_modulo to modulo
  • NEW: Available for direct usage

Parameters & Return

$num1: (string | length)

The name or length of the size you are dividing

$num2: (string | length)

The name or length of the size to use as a division

@return (number)

The modulo of two numbers

Example

scss 
$sizes: (
  'text': 16px,
  'mod': '#text' ('modulo': 3),
);
/*! mod: #{tools.get($sizes, 'mod')} */
css compiled 
/*! mod: 1px */