Accoutrement 4.0.5

Ratio Tokens » CSS Variables

$ratio-var-prefix (string)

scss 
$ratio-var-prefix: 'ratio-' !default;

Set a prefix for all ratio-tokens, and we’ll apply it when setting or calling CSS variables based on your ratio maps. Set to null or '' (empty string) for no prefix.

Since 2.0.0:

  • NEW: Initial release

Example

scss 
tools.$ratios: ('my-ratio': 0.875);
tools.$ratio-var-prefix: 'prefix_';
html { @include tools.ratios--; }
css compiled 
html {
  --prefix_my-ratio: 0.875;
}

Used By

@mixin ratios--()

@mixin ratio--()

@function var-ratio()

@mixin ratios--()

Convert any ratio-map into CSS variables, using the global $ratio-var-prefix.

  • Ratio names that start with _ or - are considered “private” and will not be output as variables
  • Ratios that contain a simple alias with no adjustments will be output with a var() value, keeping the alias relationship intact

Since 2.0.0:

  • NEW: Initial release

Parameters & Output

$source: $ratios (map)

Optionally use a custom map of ratios to set as CSS variables

{CSS output} (code block)

Custom properties for all public ratios in the map

Example

scss 
tools.$ratios: (
  'my-golden': 1.61803399,
  'line-height': '#_major-third',
);
html {
  @include tools.ratios--;
}
css compiled 
html {
  --ratio-my-golden: 1.61803399;
  --ratio-line-height: 1.25;
}

Requires

$named-ratios

$ratio-var-prefix (string)

@mixin ratio--()

Set a single custom property based on a ratio token, with optional alias and fallback

Since 2.0.0:

  • NEW: Initial release

Parameters

$ratio: (*)

Ratio name available in the $source map, or alias to use in naming the CSS variable

$value: null (string | null)

Optional value for the variable, if different from the given $ratio

$fallback: true (*)

The optional fallback value for a var() function:

  • true will generate a fallback based on the token value
  • A token name will fallback to the value of that CSS variable and then to the token’s calculated value
  • Any other fallback will be passed through unchanged

$source: $ratios (map)

Optional map of ratios to use as a palette source

Example

scss 
tools.$ratios: (
  'my-golden': 1.61803399,
  'line-height': '#_major-third',
);
.example {
  @include tools.ratio--('my-golden');
  @include tools.ratio--('gutter', 'line-height', 1.4em);
}
css compiled 
.example {
  --ratio-my-golden: 1.61803399;
  --ratio-gutter: var(--ratio-line-height, 1.4em);
}

Requires

$named-ratios

$ratio-var-prefix (string)

@function var-ratio()

Access the CSS variable associated with a given token, along with a fallback value based on the token itself

Since 2.0.0:

  • NEW: Initial release

Parameters & Return

$ratio: (*)

Ratio name available in the $source map

$fallback: true (*)

The optional fallback value for a var() function:

  • true will generate a fallback based on the token value
  • A token name will fallback to the value of that CSS variable and then to the token’s calculated value
  • Any other fallback will be passed through unchanged

$source: (map)

Optional Accoutrement map of ratios to use as source

@return (string)

CSS variable call, in the format: var(--<token>, <fallback>)

Example

scss 
tools.$ratios: (
  'my-golden': 1.61803399,
  'line-height': '#_major-third',
);
.example {
  line-height: tools.var-ratio('line-height');
  padding-bottom: calc(1 / #{tools.var-ratio('my-golden', 1.6)} * 100%);
}
css compiled 
.example {
  line-height: var(--ratio-line-height, 1.25);
  padding-bottom: calc(1 / var(--ratio-my-golden, 1.6) * 100%);
}

Requires

@function var-token()

$named-ratios

$ratio-var-prefix (string)