Math Functions

Use these internal math functions to adjust relative sizes in your map.

@function plus()

aliased as add()

Add two values together in a $sizes map.

Parameters & Return

$size1: (string | length)

The name or length of the size you are adding to

$size2: (string | length)

The name or length of the size being added

@return (number)

The calculated results of adding $size1 and $size2

Example

scss

$sizes: (
  'text': 16px,
  'margin': 14px,
  'spacer': 'text' ('plus': 'margin'),
);

Requires

@function size()

Used By

@function add()

@function minus()

aliased as subtract()

Subtract one value from another in a $sizes map.

Parameters & Return

$size1: (string | length)

The name or length of the size you are subtracting from

$size2: (string | length)

The name or length of the size to subtract

@return (number)

The calculated results of subtracting $size2 from $size1

Example

scss

$sizes: (
  'text': 16px,
  'margin': 14px,
  'shim': 'text' ('minus': 'margin'),
);

Requires

@function size()

Used By

@function subtract()

@function times()

aliased as multiply()

Multiplty two values in a $sizes map.

Parameters & Return

$size1: (string | length)

The name or length of the size you are multiplying

$size2: (string | length)

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

@return (number)

The calculated results of multiplying $size1 by $size2

Example

scss

$sizes: (
  'text': 16px,
  'double': 'text' ('times': 2),
);

Requires

@function size()

Used By

@function multiply()

@function divide()

Divide two values in a $sizes map.

Parameters & Return

$size1: (string | length)

The name or length of the size you are dividing

$size2: (string | length)

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

@return (number)

The calculated results of dividing $size1 by $size2

Example

scss

$sizes: (
  'text': 16px,
  'half': 'text' ('divide': 2),
);