121 lines
2.8 KiB
SCSS
121 lines
2.8 KiB
SCSS
@charset "UTF-8";
|
|
|
|
/// Increments up or down a defined scale and returns an adjusted value. This
|
|
/// helps establish consistent measurements and spacial relationships throughout
|
|
/// your project. We provide a list of commonly used scales as
|
|
/// [pre-defined variables][scales].
|
|
///
|
|
/// [scales]: https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/helpers/_scales.scss
|
|
///
|
|
/// @argument {number (unitless)} $increment
|
|
/// How many steps to increment up or down the scale.
|
|
///
|
|
/// @argument {number (with unit) | list} $value [1em]
|
|
/// The base value the scale starts at. Can also be set globally using the
|
|
/// `modular-scale-base` key in the Bourbon settings.
|
|
///
|
|
/// @argument {number (unitless)} $ratio [1.25]
|
|
/// The ratio the scale is built on. Can also be set globally using the
|
|
/// `modular-scale-ratio` key in the Bourbon settings.
|
|
///
|
|
/// @return {number (with unit)}
|
|
///
|
|
/// @example scss
|
|
/// .element {
|
|
/// font-size: modular-scale(2);
|
|
/// }
|
|
///
|
|
/// // CSS Output
|
|
/// .element {
|
|
/// font-size: 1.5625em;
|
|
/// }
|
|
///
|
|
/// @example scss
|
|
/// .element {
|
|
/// margin-right: modular-scale(3, 2em);
|
|
/// }
|
|
///
|
|
/// // CSS Output
|
|
/// .element {
|
|
/// margin-right: 3.90625em;
|
|
/// }
|
|
///
|
|
/// @example scss
|
|
/// .element {
|
|
/// font-size: modular-scale(3, 1em 1.6em, $major-seventh);
|
|
/// }
|
|
///
|
|
/// // CSS Output
|
|
/// .element {
|
|
/// font-size: 3em;
|
|
/// }
|
|
///
|
|
/// @example scss
|
|
/// // Globally change the base ratio
|
|
/// $bourbon: (
|
|
/// "modular-scale-ratio": 1.2,
|
|
/// );
|
|
///
|
|
/// .element {
|
|
/// font-size: modular-scale(3);
|
|
/// }
|
|
///
|
|
/// // CSS Output
|
|
/// .element {
|
|
/// font-size: 1.728em;
|
|
/// }
|
|
///
|
|
/// @require {function} _fetch-bourbon-setting
|
|
|
|
@function modular-scale(
|
|
$increment,
|
|
$value: _fetch-bourbon-setting("modular-scale-base"),
|
|
$ratio: _fetch-bourbon-setting("modular-scale-ratio")
|
|
) {
|
|
$v1: nth($value, 1);
|
|
$v2: nth($value, length($value));
|
|
$value: $v1;
|
|
|
|
// scale $v2 to just above $v1
|
|
@while $v2 > $v1 {
|
|
$v2: ($v2 / $ratio); // will be off-by-1
|
|
}
|
|
@while $v2 < $v1 {
|
|
$v2: ($v2 * $ratio); // will fix off-by-1
|
|
}
|
|
|
|
// check AFTER scaling $v2 to prevent double-counting corner-case
|
|
$double-stranded: $v2 > $v1;
|
|
|
|
@if $increment > 0 {
|
|
@for $i from 1 through $increment {
|
|
@if $double-stranded and ($v1 * $ratio) > $v2 {
|
|
$value: $v2;
|
|
$v2: ($v2 * $ratio);
|
|
} @else {
|
|
$v1: ($v1 * $ratio);
|
|
$value: $v1;
|
|
}
|
|
}
|
|
}
|
|
|
|
@if $increment < 0 {
|
|
// adjust $v2 to just below $v1
|
|
@if $double-stranded {
|
|
$v2: ($v2 / $ratio);
|
|
}
|
|
|
|
@for $i from $increment through -1 {
|
|
@if $double-stranded and ($v1 / $ratio) < $v2 {
|
|
$value: $v2;
|
|
$v2: ($v2 / $ratio);
|
|
} @else {
|
|
$v1: ($v1 / $ratio);
|
|
$value: $v1;
|
|
}
|
|
}
|
|
}
|
|
|
|
@return $value;
|
|
}
|