From 4ec6225a9273b8f0c93e4b3d93ecf1e1686b719c Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 4 Feb 2022 20:28:18 +0100 Subject: Fix errors from transition from node-sass to sass --- src/_easing.scss | 12 +++++----- src/_functions.scss | 8 ++++--- src/_gradients.scss | 29 +++++++++++++----------- src/_harmony.scss | 10 +++++---- src/_math.scss | 62 ---------------------------------------------------- src/_responsive.scss | 4 ++-- src/main.scss | 1 - 7 files changed, 36 insertions(+), 90 deletions(-) delete mode 100644 src/_math.scss (limited to 'src') diff --git a/src/_easing.scss b/src/_easing.scss index c41635b..a39f317 100644 --- a/src/_easing.scss +++ b/src/_easing.scss @@ -9,6 +9,8 @@ /// @access public //// +@use 'sass:math'; + /// /// @access private /// @@ -75,7 +77,7 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; $samples: (); @for $i from 0 through $iro-cubic-bezier-sample-pool-size { - $samples: append($samples, iro-cubic-bezier-func($x1, $x2, $i / $iro-cubic-bezier-sample-pool-size)); + $samples: append($samples, iro-cubic-bezier-func($x1, $x2, math.div($i, $iro-cubic-bezier-sample-pool-size))); } $iro-cubic-bezier-sample-pool: map-merge($iro-cubic-bezier-sample-pool, ($sample-pool-key: $samples)) !global; @@ -141,7 +143,7 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; } $cur-x: iro-cubic-bezier-func($x1, $x2, $t) - $x; - $t: $t - $cur-x / $cur-slope; + $t: $t - math.div($cur-x, $cur-slope); } @return $t; @@ -189,13 +191,13 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; $last-sample: $iro-cubic-bezier-sample-pool-size; @while ($cur-sample != $last-sample) and (nth($samples, $cur-sample) <= $x) { - $intv-start: $intv-start + (1 / $iro-cubic-bezier-sample-pool-size); + $intv-start: $intv-start + math.div(1, $iro-cubic-bezier-sample-pool-size); $cur-sample: $cur-sample + 1; } $cur-sample: $cur-sample - 1; - $dist: ($x - nth($samples, $cur-sample)) / (nth($samples, $cur-sample + 1) - nth($samples, $cur-sample)); - $guess-t: $intv-start + $dist / $iro-cubic-bezier-sample-pool-size; + $dist: math.div($x - nth($samples, $cur-sample), nth($samples, $cur-sample + 1) - nth($samples, $cur-sample)); + $guess-t: $intv-start + math.div($dist, $iro-cubic-bezier-sample-pool-size); $init-slope: iro-cubic-bezier-func-slope($x1, $x2, $guess-t); @if $init-slope >= $iro-cubic-bezier-newton-min-slope { diff --git a/src/_functions.scss b/src/_functions.scss index 2f34dc4..92ee262 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -9,6 +9,8 @@ /// @access public //// +@use 'sass:math'; + /// /// Replace a substring with a new string. /// @@ -303,19 +305,19 @@ /// @return {number} Unit-less variable /// @function iro-strip-unit($n) { - @return $n / ($n * 0 + 1); + @return math.div($n, $n * 0 + 1); } /// /// Convert a pixel value to a rem value. /// -/// @param {number} $size - Pixel value to convert +/// @param {number} $size - Pixel value to convert /// @param {number} $base [$iro-root-size] - Reference base font size used for conversion /// /// @return {number} Pixel value converted to rem /// @function iro-px-to-rem($size, $base: $iro-root-size) { - @return $size / $base * 1rem; + @return math.div($size, $base) * 1rem; } /// diff --git a/src/_gradients.scss b/src/_gradients.scss index 7c52d63..657efa2 100644 --- a/src/_gradients.scss +++ b/src/_gradients.scss @@ -15,6 +15,9 @@ /// @access public //// +@use 'sass:math'; +@use 'sass:meta'; + /// /// Number of intermediate color stops generated to achieve easing. /// A higher value results in better quality, but also much more generated code. @@ -340,7 +343,7 @@ $iro-easing-gradient-steps: 10 !default; $distance: $next-stop-pos - $prev-stop-pos; @for $i from 1 through $iro-easing-gradient-steps { - $perc: $i / $iro-easing-gradient-steps; + $perc: math.div($i, $iro-easing-gradient-steps); $color: null; $pos: $prev-stop-pos + $perc * $distance; @@ -359,20 +362,20 @@ $iro-easing-gradient-steps: 10 !default; @if type-of($prev-stop-pos) != number { // must be calc() - @if (type-of($prev-stop-pos) != string) or (str-index($prev-stop-pos, 'calc(') != 1) { + @if type-of($prev-stop-pos) != calculation { @error 'Invalid color stop position: #{inspect($prev-stop-pos)}'; } - $prev-stop-pos: str-slice($prev-stop-pos, 6, str-length($prev-stop-pos) - 1); + $prev-stop-pos: meta.calc-args($prev-stop-pos); } @if type-of($next-stop-pos) != number { // must be calc() - @if (type-of($next-stop-pos) != string) or (str-index($next-stop-pos, 'calc(') != 1) { + @if type-of($next-stop-pos) != calculation { @error 'Invalid color stop position: #{inspect($next-stop-pos)}'; } - $next-stop-pos: str-slice($next-stop-pos, 6, str-length($next-stop-pos) - 1); + $next-stop-pos: meta.calc-args($next-stop-pos); } @for $i from 1 through $iro-easing-gradient-steps { @@ -454,20 +457,20 @@ $iro-easing-gradient-steps: 10 !default; @if type-of($prev-stop-pos) != number { // must be calc() - @if (type-of($prev-stop-pos) != string) or (str-index($prev-stop-pos, 'calc(') != 1) { + @if type-of($prev-stop-pos) != calculation { @error 'Invalid color stop position: #{inspect($prev-stop-pos)}'; } - $prev-stop-pos: str-slice($prev-stop-pos, 6, str-length($prev-stop-pos) - 1); + $prev-stop-pos: meta.calc-args($prev-stop-pos); } @if type-of($next-stop-pos) != number { // must be calc() - @if (type-of($next-stop-pos) != string) or (str-index($next-stop-pos, 'calc(') != 1) { + @if type-of($next-stop-pos) != calculation { @error 'Invalid color stop position: #{inspect($next-stop-pos)}'; } - $next-stop-pos: str-slice($next-stop-pos, 6, str-length($next-stop-pos) - 1); + $next-stop-pos: meta.calc-args($next-stop-pos); } @for $i from 1 through $steps { @@ -550,20 +553,20 @@ $iro-easing-gradient-steps: 10 !default; @if type-of($prev-stop-pos) != number { // must be calc() - @if (type-of($prev-stop-pos) != string) or (str-index($prev-stop-pos, 'calc(') != 1) { + @if type-of($prev-stop-pos) != calculation { @error 'Invalid color stop position: #{inspect($prev-stop-pos)}'; } - $prev-stop-pos: str-slice($prev-stop-pos, 6, str-length($prev-stop-pos) - 1); + $prev-stop-pos: meta.calc-args($prev-stop-pos); } @if type-of($next-stop-pos) != number { // must be calc() - @if (type-of($next-stop-pos) != string) or (str-index($next-stop-pos, 'calc(') != 1) { + @if type-of($next-stop-pos) != calculation { @error 'Invalid color stop position: #{inspect($next-stop-pos)}'; } - $next-stop-pos: str-slice($next-stop-pos, 6, str-length($next-stop-pos) - 1); + $next-stop-pos: meta.calc-args($next-stop-pos); } @for $i from 1 through length($stops) { diff --git a/src/_harmony.scss b/src/_harmony.scss index c3c8633..076fe55 100644 --- a/src/_harmony.scss +++ b/src/_harmony.scss @@ -8,6 +8,8 @@ /// @access public //// +@use 'sass:math'; + /// /// Adjust a value to a modular scale. /// @@ -23,7 +25,7 @@ /// @function iro-harmony-modular-scale($times, $base, $ratio) { @if type-of($base) == number { - @return $base * iro-math-pow($ratio, $times); + @return $base * math.pow($ratio, $times); } $main-base: nth($base, 1); @@ -32,7 +34,7 @@ @each $b in iro-list-slice($base, 2) { @if $b > $main-base { @while $b > $main-base { - $b: $b / $ratio; + $b: math.div($b, $ratio); } $b: $b * $ratio; } @else if $b < $main-base { @@ -48,9 +50,9 @@ $all-bases: iro-quicksort($all-bases); $base-index: $times % length($all-bases) + 1; - $exp: floor($times / length($all-bases)); + $exp: math.floor(math.div($times, length($all-bases))); - @return nth($all-bases, $base-index) * iro-math-pow($ratio, $exp); + @return nth($all-bases, $base-index) * math.pow($ratio, $exp); } /// diff --git a/src/_math.scss b/src/_math.scss deleted file mode 100644 index 9b71bf6..0000000 --- a/src/_math.scss +++ /dev/null @@ -1,62 +0,0 @@ -//// -/// Basic mathematical functions. -/// -/// @group Math functions -/// -/// @access public -//// - -/// -/// Perform exponentiation. Only integer exponents are supported. -/// -/// @param {number} $base -/// @param {number} $exp -/// -/// @return {number} -/// -/// @example scss - Exponentiation with a positive exponent -/// $result: iro-math-pow(3, 2); // The value of $result is 3^2 = 9 -/// -/// @example scss - Exponentiation with a negative exponent -/// $result: iro-math-pow(2, -3); // The value of $result is 1/(2^3) = 1/8 -/// -@function iro-math-pow($base, $exp) { - $value: 1; - - @if $exp > 0 { - @for $i from 1 through $exp { - $value: $value * $base; - } - } @else if $exp < 0 { - @for $i from 1 through -$exp { - $value: $value / $base; - } - } - - @return $value; -} - -/// -/// Clamp a number between a minimum and maximum value. -/// -/// @param {number} $value - Value to clamp -/// @param {number} $min - Minimum value -/// @param {number} $max - Maximum value -/// -/// @return {number} -/// -/// @example scss -/// $result: iro-math-clamp(20, 0, 10); // The value of $result is 10 -/// -/// @example scss -/// $result: iro-math-clamp(50, 20, 100); // The value of $result is 50 -/// -@function iro-math-clamp($value, $min, $max) { - @if $value < $min { - @return $min; - } - @if $value > $max { - @return $max; - } - @return $value; -} diff --git a/src/_responsive.scss b/src/_responsive.scss index 6f2a416..a3d8445 100644 --- a/src/_responsive.scss +++ b/src/_responsive.scss @@ -391,9 +391,9 @@ $iro-responsive-context-id: 'responsive' !default; } @if not $vertical { - $calc: unquote('#{$calc}#{$value-diff} * ((100vw - #{$min-viewport}) / #{$viewport-diff})'); + $calc: unquote('#{$calc}#{$value-diff} * (100vw - #{$min-viewport}) / #{$viewport-diff}'); } @else { - $calc: unquote('#{$calc}#{$value-diff} * ((100vh - #{$min-viewport}) / #{$viewport-diff})'); + $calc: unquote('#{$calc}#{$value-diff} * (100vh - #{$min-viewport}) / #{$viewport-diff}'); } @if $without-calc { diff --git a/src/main.scss b/src/main.scss index 5b1b3d1..898b0ae 100644 --- a/src/main.scss +++ b/src/main.scss @@ -1,5 +1,4 @@ @import 'functions'; -@import 'math'; @import 'vars'; @import 'contexts'; @import 'bem'; -- cgit v1.2.3-70-g09d2