41 lines
1.0 KiB
SCSS
41 lines
1.0 KiB
SCSS
|
@function modular-scale($value, $increment, $ratio) {
|
||
|
|
@if $increment > 0 {
|
||
|
|
@for $i from 1 through $increment {
|
||
|
|
$value: ($value * $ratio);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@if $increment < 0 {
|
||
|
|
$increment: abs($increment);
|
||
|
|
@for $i from 1 through $increment {
|
||
|
|
$value: ($value / $ratio);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@return $value;
|
||
|
|
}
|
||
|
|
|
||
|
|
// div {
|
||
|
|
// Increment Up GR with positive value
|
||
|
|
// font-size: modular-scale(14px, 1, 1.618); // returns: 22.652px
|
||
|
|
//
|
||
|
|
// Increment Down GR with negative value
|
||
|
|
// font-size: modular-scale(14px, -1, 1.618); // returns: 8.653px
|
||
|
|
//
|
||
|
|
// Can be used with ceil(round up) or floor(round down)
|
||
|
|
// font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px
|
||
|
|
// font-size: ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px
|
||
|
|
// }
|
||
|
|
//
|
||
|
|
// modularscale.com
|
||
|
|
|
||
|
|
@function golden-ratio($value, $increment) {
|
||
|
|
@return modular-scale($value, $increment, 1.618)
|
||
|
|
}
|
||
|
|
|
||
|
|
// div {
|
||
|
|
// font-size: golden-ratio(14px, 1); // returns: 22.652px
|
||
|
|
// }
|
||
|
|
//
|
||
|
|
// goldenratiocalculator.com
|