Accoutrement 4.0.5

Fonts » CSS Variables

$font-var-prefix (string)

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

Since CSS variables are often defined in a global space, it can be useful to prefix different variable types. Accoutrement maps help solve that problem in Sass, so we wanted to carry that over into our CSS variable support. Set a prefix for all font-tokens, and we’ll apply it when setting or calling CSS variables based on your font maps. Set to null or '' (empty string) for no prefix.

Since 2.0.0:

  • NEW: Initial release

Example

scss 
tools.$fonts: (
  'my-font': (
    'stack': (arial, helvetica, sans-serif),
   )
);
$font-var-prefix: 'prefix_';
html { @include tools.font--('my-font') }
css compiled 
html {
  --font-my-font: my-font, arial, helvetica, sans-serif;
}

Used By

@mixin fonts--()

@mixin font--()

@function var-font()

@mixin fonts--()

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

  • Font names that start with _ or - are considered “private” and will not be output as variables
  • Fonts 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: $fonts (map)

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

$use: 'stack' (string | list)

Font-map value (such as ‘name’ or ‘stack’) to use as custom-property values

{CSS output} (code block)

Custom properties for all public fonts in the map

Example

scss 
$fonts: (
  '_TestFont': (
    'name': 'My Test Font',
    'stack': ('Georgia', 'serif'),
   ),
  'text': '#_TestFont',
  'sans': '#text',
);
html {
  @include tools.fonts--;
}

Requires

@function font-values() [private]

$font-var-prefix (string)

@mixin font--()

Set a single custom property based on a map-font, with optional alias and fallback

Since 2.0.0:

  • NEW: Initial release

Parameters

$font: (*)

Font 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 $font

$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

$use: 'stack' (string | list)

Font-map value (such as ‘name’ or ‘stack’) to use as custom-property values

$source: $fonts (map)

Optional map of fonts to use as a palette source

Example

scss 
tools.$fonts: (
  '_TestFont': (
    'name': 'My Test Font',
    'stack': ('Georgia', 'serif'),
   ),
  'text': '#_TestFont',
  'sans': '#text',
);
.example {
  @include tools.font--('text');
  @include tools.font--('headline', 'sans', sans-serif);
}
css compiled 
.example {
  --font-text: "My Test Font", Georgia, serif;
  --font-headline: var(--font-sans, sans-serif);
}

Requires

@function font-values() [private]

$font-var-prefix (string)

@function var-font()

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

$font: (*)

Font 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: $fonts (map)

Optional Accoutrement map of fonts to use as source

$use: 'stack' (string | list)

Font-map value (such as ‘name’ or ‘stack’) to use as custom-property values

@return (string)

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

Example

scss 
$fonts: (
  '_TestFont': (
    'name': 'My Test Font',
    'stack': ('Georgia', 'serif'),
   ),
  'text': '#_TestFont',
  'sans': '#text',
);
.example {
  font-family: tools.var-font('sans', sans-serif);
}
css compiled 
.example {
  font-family: var(--font-sans, sans-serif);
}

Requires

@function font-values() [private]

@function var-token()

$font-var-prefix (string)