Accessing Sizes

@function size()

Access a named size in your $sizes map, using any comparable units.

Parameters & Return

$size: (string | length | list)

The name of a size in your configuration (e.g. line-height), or a length to be converted into different units (e.g. 24px), or a base-size and adjustments to be made (e.g. 24px ('minor-third': 2)), or a calc(%s + %s) ('root', 'rhythm') recipie for building calc values. For the sake of consistent documentation, I recommend keeping adjustments in the configuration whenever possible.

$unit...: (vararg)

The desired unit for the output (e.g. px or rem), and any other arguments required for the conversion.

@return (length)

The calculated length, in the requested units.

Requires

@function _ac-scale-get-size() [private]

@function convert-units()

Used By

@function plus()

@function minus()

@function times()

@function divide()

@function negative()

@mixin square()

@function negative()

Return the inverse value of any length, in comparable units.

Parameters & Return

$size: (string | length | list)

The name of a size in your configuration (e.g. line-height), or a length to be converted into different units (e.g. 24px), or a base-size and adjustments to be made (e.g. 24px ('minor-third': 2)). For the sake of consistent documentation, I recommend keeping adjustments in the configuration whenever possible.

$unit...: (vararg)

The desired unit for the output (e.g. px or rem), and any other arguments required for the conversion.

@return (length)

The calculated negative length, in the requested units.

Requires

@function size()

@function _ac-str-replace() [private]

@function ratio()

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

Parameters & Return

$ratio: (string | number)

The key-name or value of a ratio

@return (number)

The numeric value of a ratio

Example

scss

/* Octave: #{ratio('octave')} */
/* Fifth: #{ratio('fifth')} */

css compiled

/* Octave: 2 */
/* Fifth: 1.5 */

Requires

$_DEFAULT-RATIOS (map)

$ratios (map)

Used By

@function _ac-scale-adjust-size() [private]

@mixin square()

Create a square by setting equal CSS height and width properties with the given size & unit value.

Parameters & Output

$size: (string | length | list)

The name of a size in your configuration (e.g. line-height), or a length to be converted into different units (e.g. 24px), or a base-size and adjustments to be made (e.g. 24px ('minor-third': 2)). For the sake of consistent documentation, I recommend keeping adjustments in the configuration whenever possible.

$unit...: (vararg)

The desired unit for the output (e.g. px or rem), and any other arguments required for the conversion.

{CSS output} (code block)

Equal CSS height and width properties, set to the given size and units.