_modular-scale.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. // Scaling Variables
  2. $golden: 1.618;
  3. $minor-second: 1.067;
  4. $major-second: 1.125;
  5. $minor-third: 1.2;
  6. $major-third: 1.25;
  7. $perfect-fourth: 1.333;
  8. $augmented-fourth: 1.414;
  9. $perfect-fifth: 1.5;
  10. $minor-sixth: 1.6;
  11. $major-sixth: 1.667;
  12. $minor-seventh: 1.778;
  13. $major-seventh: 1.875;
  14. $octave: 2;
  15. $major-tenth: 2.5;
  16. $major-eleventh: 2.667;
  17. $major-twelfth: 3;
  18. $double-octave: 4;
  19. $modular-scale-ratio: $perfect-fourth !default;
  20. $modular-scale-base: em($em-base) !default;
  21. @function modular-scale($increment, $value: $modular-scale-base, $ratio: $modular-scale-ratio) {
  22. $v1: nth($value, 1);
  23. $v2: nth($value, length($value));
  24. $value: $v1;
  25. // scale $v2 to just above $v1
  26. @while $v2 > $v1 {
  27. $v2: ($v2 / $ratio); // will be off-by-1
  28. }
  29. @while $v2 < $v1 {
  30. $v2: ($v2 * $ratio); // will fix off-by-1
  31. }
  32. // check AFTER scaling $v2 to prevent double-counting corner-case
  33. $double-stranded: $v2 > $v1;
  34. @if $increment > 0 {
  35. @for $i from 1 through $increment {
  36. @if $double-stranded and ($v1 * $ratio) > $v2 {
  37. $value: $v2;
  38. $v2: ($v2 * $ratio);
  39. } @else {
  40. $v1: ($v1 * $ratio);
  41. $value: $v1;
  42. }
  43. }
  44. }
  45. @if $increment < 0 {
  46. // adjust $v2 to just below $v1
  47. @if $double-stranded {
  48. $v2: ($v2 / $ratio);
  49. }
  50. @for $i from $increment through -1 {
  51. @if $double-stranded and ($v1 / $ratio) < $v2 {
  52. $value: $v2;
  53. $v2: ($v2 / $ratio);
  54. } @else {
  55. $v1: ($v1 / $ratio);
  56. $value: $v1;
  57. }
  58. }
  59. }
  60. @return $value;
  61. }