Accoutrement 4.0.3

QuickStart: Scale

Sass size & scale management tools:

  • Gather all your sizes into a single map
  • Generate new sizes based on modular scales or arbitrary functions
  • Convert between relative units
  • Access sizes on the fly

Import

If you’ve already imported accoutrement you are ready to go. You can also import the scale module on its own:

  @use '<path-to>/accoutrement/sass/scale';

Sizes & Ratios

Establish your palette of ratios (modular scales) and sizes:

$ratios: (
  'my-ratio': 1.25,
);

$sizes: (
  // define explicit values
  'root': 24px,
  'icons': 1em,
  'page': 8in,

  // reference existing sizes
  'text': '#root'

  // apply adjustments and conversions
  // using named-ratios or arbitrary functions
  'rhythm': '#root' ( scale: '_fifth' 1, 'convert-units': 'rem'),

  'h1': '#root' ( scale: 'my-ratio' 3 ),
  'h2': '#root' ( scale: 'my-ratio' 2 ),
  'h3': '#root' ( scale: 'my-ratio' 1 ),

  // define calc() output based on existing sizes
  'viewport-relative': 'calc(%s + %s)' ('%s': '#root' 2vw),
);

Access your named sizes using the size() function, and even convert units on-the-fly:

.example {
  font-size('text');
  width: size('page', 'px');
}

@function scale()

Apply a modular or linear scale to any value, moving up or down the scale by a given number of steps. (Linear scaling is simple multiplication and may not be particularly useful where the scale is known).

Since 4.0.0:

  • NEW: Provides direct access to scales, without needing to use the token map.

Parameters & Return

$value: (token | number)

The original value to be scaled

$ratio: (token | number | 'linear')

The key name or value of a ratio

$steps: (number)

The number of steps to move along a scale

$source: ratio.$ratios (map)

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

@return (number)

The scaled value

@error

  • Ratio must be either a number or “linear”

Example

scss
/* _widescreen: #{tools.scale(700px, '_widescreen')} */
/* 1.4: #{tools.scale(24px, 1.4, -1)} */
/* linear: #{tools.scale(16px, 'linear', 2)} */
css compiled
/* _widescreen: 1244.4444444444px */
/* 1.4: 17.1428571429px */
/* linear: 32px */

Requires

@function check() [private]

@function size()

@function error() [private]

@function is-ratio()