Accoutrement 2.1.1

Layout & Type Ratios

Ratios are useful for both modular-scales and fluid media layouts. We’ve moved them into the core, as a common way of manipulating numerical data, on-par with function-calls.

$ratios (map)

scss
$ratios: () !default;

Define your own ratios, or alias keys for built-in ratios. Any ratios that resolve to linear will not use any exponential scale.

Example

scss
$ratios: (
  'line-height': (1 / 3),
  'headings': 'linear',
  '_golden': 1.61803399,
);

Related

Used By

@mixin add-ratios()

@function ratio()

Retrieve a scale ratio by name from either the $_DEFAULT-RATIOS or user $ratios configurations.

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

$ratio: (string | number)

The key-name or value of a ratio

$do: null (map | null)

A map of function/ratio adjustments to run on the returned value

$source: $ratios (map)

Optional accoutrement-format map of ratios to use as the origin palette (in addition to the provided defaults)

@return (number)

The numeric value of a ratio

Example

scss
/* _octave: #{ratio('_octave')} */
/* _fifth: #{ratio('_fifth')} */
css compiled
/* _octave: 2 */
/* _fifth: 1.5 */

Requires

@function get-token()

Used By

@function fluid-ratio()

@function _a_do() [private]

@mixin add-ratios()

Merge individual ratio maps into the global $ratio variable. This can be useful for internal organization, documentation with SassDoc, or integration with our pattern-library generator: Herman.

Parameters & Output

$maps: (map...)

Pass any number of maps to be merged.

{CSS output} (code block)

  • An updated global $ratios variable, with new maps merged in.

Requires

@function _a_map-multimerge() [private]

$ratios (map)

$_a_RATIOS

scss
$_a_RATIOS: (
  '_octave': 2,
  '_major-seventh': (15 / 8),
  '_minor-seventh': (16 / 9),
  '_major-sixth': (5 / 3),
  '_minor-sixth': (8 / 5),
  '_fifth': (3 / 2),
  '_augmented-fourth': (45 / 32),
  '_fourth': (4 / 3),
  '_major-third': (5 / 4),
  '_minor-third': (6 / 5),
  '_major-second': (9 / 8),
  '_minor-second': (16 / 15),

  '_photo': '#_fifth',
  '_classic': '#_fourth',
  '_widescreen': '#_minor-seventh',
  '_cinema': 2.39,
  '_golden': 1.618,
);

Some default named ratios you can use, but shouldn’t edit directly.

Related

Used By

@function ratio()

@mixin ratios--()

@mixin ratio--()

@function var-ratio()