From 85f98fe8d44301168a69a08e3a00e4fc36650328 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Jun 2021 18:23:23 -0700 Subject: [PATCH] Use custom divide() function instead of Dart Sass math module for greater compatibility --- scss/_functions.scss | 29 +++++++++++++++++++++++++++-- scss/mixins/_grid.scss | 5 ++++- 2 files changed, 31 insertions(+), 3 deletions(-) diff --git a/scss/_functions.scss b/scss/_functions.scss index 4f2c79a57867..468c6163436a 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -123,7 +123,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 $l1: luminance($background); $l2: luminance(opaque($background, $foreground)); - @return if($l1 > $l2, ($l1 + .05) / ($l2 + .05), ($l2 + .05) / ($l1 + .05)); + @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05)); } // Return WCAG2.0 relative luminance @@ -137,7 +137,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 ); @each $name, $value in $rgb { - $value: if($value * .555 < .03928, $value * .555 / 12.92, nth($_luminance-list, $value + 1)); + $value: if($value * .555 < .03928, divide($value * .555, 12.92), nth($_luminance-list, $value + 1)); $rgb: map-merge($rgb, ($name: $value)); } @@ -219,3 +219,28 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2); } + +@function divide($dividend, $divisor, $precision: 10) { + $sign: if($dividend > 0 and $divisor > 0, 1, -1); + $dividend: abs($dividend); + $divisor: abs($divisor); + $quotient: 0; + $remainder: $dividend; + @if $dividend == 0 { + @return 0; + } + @if $divisor == 0 { + @error "Cannot divide by 0"; + } + @if $divisor == 1 { + @return $dividend; + } + @while $remainder >= $divisor { + $quotient: $quotient + 1; + $remainder: $remainder - $divisor; + } + @if $remainder > 0 and $precision > 0 { + $remainder: divide($remainder * 10, $divisor, $precision - 1) * .1; + } + @return ($quotient + $remainder) * $sign; +} diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 9c5ae23363e1..f108b447b359 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + /// Grid system // // Generate semantic grid columns with these mixins. @@ -29,7 +31,8 @@ @mixin make-col($size: false, $columns: $grid-columns) { @if $size { flex: 0 0 auto; - width: percentage($size / $columns); + width: percentage(divide($size, $columns)); + } @else { flex: 1 1 0; max-width: 100%;