Scale Configuration
$_DEFAULT-RATIOS (map)
$_DEFAULT-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),
'multiple': 'linear',
);Common pre-defined ratios that you can access by name.
Numeric ratios (like the musical scale) are exponential -
while a ‘linear’ scale uses simple multipliers.
This variable should not be edited.
Use the $ratios variable to add your own ratios,
or aliases for built-in ratios.
Don’t make changes to this map directly.
You can add your own named ratios in the $ratios map.
Related
Used By
@function ratio()
$ratios (map)
$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
$ratios: (
'line-height': (1 / 3),
'headings': 'linear',
'golden': 1.61803399,
);Related
$sizes (map)
$sizes: (
'root': $_BROWSER-DEFAULT-FONT-SIZE,
) !default;Defined a palette of common sizes to be used across your project,
in the format “name: size” or “name: basis (ratio/function: value)”.
If your map includes a px-comparable value for root,
it will be used in relative-size unit conversions.
Named sizes can contain length values (24px),
reference to previously-defined sizes ('root'),
a map of relative-adjustments using ratios (('golden': 2))
and math functions (('plus': 2)),
or a format-string & list for interpolating calc() values
(calc(%s + %s) ('root', 2vw)).
Internal math functions are always available by name,
but recent versions of Sass require you to capture 3rd-party functions
using the get-function($name) syntax before calling them.
To simplify your maps,
we recommend using the $functions map
to store captured functions in one place,
where we can continue to retrieve them by name.
Map Properties
'root': 16px (Map)
Include a root font-size for your document, used for calculating relative sizes. This should match the size applied to your html element.
Example
$sizes: (
'root': 24px,
'text': 'root' ('convert-units': 'em'),
'h1': 'root' ('times': 2),
'calc': calc(%s + %s) ('root', 2vw),
);$_LOCAL-SCALE-FUNCTIONS (map)
$_LOCAL-SCALE-FUNCTIONS: (
'add', 'plus',
'minus', 'subtract',
'times', 'multiply',
'divide',
'convert-units',
);These functions are defined internally,
and can be called by name without first being captured
using the Sass get-function() approach.
Don’t make changes to this map directly.
You can add your own named functions in the $functions map.
Related
Used By
@function _ac-scale-get-function() [private]
$functions (map)
$functions: () !default;Defined any additional math functions required
to generate relataionships in the $sizes map.
This is only necessary for newer versions of Sass,
where functions are first-class,
and can be captured using get-function($name).
$functions: (
'pow': get-function('pow'),
'sin': get-function('sin'),
);
Related
Used By
@function _ac-scale-get-function() [private]
@mixin add-sizes()
Merge individual size maps into the global $sizes variable,
in case you want to define sizes in smaller groups
such as text-sizes, spacing-sizes, etc
before merging them into a single global size-palette.
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
$sizesvariable, with new maps merged in.
Example
$text-sizes: (
'root': 24px,
'h1': 'root' ('times': 2),
);
@include add-sizes($text-sizes);@mixin add-ratios()
Parameters & Output
$maps: (map...)
Pass any number of maps to be merged.
{CSS output} (code block)
- An updated global
$ratiosvariable, with new maps merged in.
$ac-format-string (string)
$ac-format-string: '%s';Define your own format-string
for building calc(%s + %s) ('root', 'rhythm') recipies.
Example
$ac-format-string: '@@@';