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; */