Accoutrement 4.0.1

Built-In Ratios

Some built-in named ratios you can use, either directly or through the token syntax (where these values are provided with a _ prefix).

Since 4.0.0:

  • NEW: Now available as individual variables (without the _ prefix)

Example

scss
@use 'ratio/named';
@each $name, $value in meta.module-variables('named') {
/*! $#{$name}: #{$value}; */
}
css compiled
/*! $octave: 2; */
/*! $major-seventh: 1.875; */
/*! $minor-seventh: 1.7777777778; */
/*! $major-sixth: 1.6666666667; */
/*! $minor-sixth: 1.6; */
/*! $fifth: 1.5; */
/*! $augmented-fourth: 1.40625; */
/*! $fourth: 1.3333333333; */
/*! $major-third: 1.25; */
/*! $minor-third: 1.2; */
/*! $major-second: 1.125; */
/*! $minor-second: 1.0666666667; */
/*! $photo: 1.5; */
/*! $classic: 1.3333333333; */
/*! $widescreen: 1.7777777778; */
/*! $cinema: 2.39; */
/*! $golden: 1.61803399; */

Used By

@function ratio()

@mixin ratios--()

@mixin ratio--()

@function var-ratio()