fix: Update to new Sass math.div function

_systems.scss

@@ -1,4 +1,6 @@
 // System Utilities
+@use 'sass:math';
+
 // Color System
 @import "systems/color/docs";
 @import "systems/color/foreground/utility";

_tools.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 // Global Function
 @import "tools/settings/function";
 @import "globals/media-queries/function";

mdcss/_mdcss.scss

@@ -106,12 +106,12 @@ section[id*="grid-demo-"] + section[id*="grid-demo-"] {
   $color-2: nth($demo-color, 2);
 
   @for $i from 1 through grid(columns) {
-    $mix-1: ($i / grid(columns)) * 100%;
-    $mix-2: 100% - (($i / grid(columns)) * 100%);
+    $mix-1: math.div($i, grid(columns)) * 100%;
+    $mix-2: 100% - (math.div($i, grid(columns)) * 100%);
 
     &:nth-child(#{$i}) {
       $color: $color-1;
-      @if ($i / 2) == ceil($i / 2) {
+      @if math.div($i, 2) == math.ceil(math.div($i, 2)) {
         $color: mix($color-1, darken($color-2, 15%), $mix-1);
       } @else {
         $color: mix(lighten($color-2, 5%), $color-1, $mix-2);

mdcss/docs.scss

@@ -3,6 +3,7 @@
 // turns off and on the comments used to generate
 // the Docs. If this variable is set to false, the
 // docs will not generate.
+@use "sass:math";
 @import "../settings";
 $sparkle-show-docs: true;
 

package.json

@@ -36,7 +36,7 @@
     "mocha": "^8.1.3",
     "postcss": "^8.1.0",
     "postcss-cli": "^8.0.0",
-    "sass": "^1.26.11",
+    "sass": "^1.35.1",
     "sass-true": "^6.0.0",
     "standard-version": "^9.0.0"
   },

systems/grid/cells/_mixins.scss

@@ -1,6 +1,6 @@
 @mixin sparkle-column-span($count, $span) {
   float: left;
-  width: ($span / $count) * 100%;
+  width: math.div($span, $count) * 100%;
 
   @supports (display: grid) {
     width: auto;
@@ -13,13 +13,13 @@
   $r: '';
   $end: '';
   $grid-set: '';
-  @for $i from 1 through floor($count/$iteration) {
+  @for $i from 1 through math.floor(math.div($count, $iteration)) {
     @if $count - $iteration > 0 {
-      @if $count/2 < $iteration {
+      @if math.div($count, 2) < $iteration {
         $grid-set: $count - $iteration;
         $end: '<div class="#{$class}-#{$grid-set}-#{$count}"><span>#{$grid-set}-#{$count}</span></div>';
-      } @else if ($iteration * floor($count / $iteration)) < $count {
-        $grid-set: $count - ($iteration * floor($count / $iteration));
+      } @else if ($iteration * math.floor(math.div($count, $iteration))) < $count {
+        $grid-set: $count - ($iteration * math.floor(math.div($count, $iteration)));
         $end: '<div class="#{$class}-#{$grid-set}-#{$count}"><span>#{$grid-set}-#{$count}</span></div>';
       } @else {
         $end: '';
@@ -33,23 +33,23 @@
 @function sparkle-grid-class($iteration, $count, $class, $mq) {
   $val: '';
 
-  @if ($iteration/$count) == (1/4) {
+  @if math.div($iteration, $count) == math.div(1, 4) {
     $val: ".#{$class}-quarter#{$mq}, ";
   }
 
-  @else if ($iteration/$count) == (1/3) {
+  @else if math.div($iteration, $count) == math.div(1, 3) {
     $val: ".#{$class}-third#{$mq}, ";
   }
 
-  @else if ($iteration/$count) == (1/2) {
+  @else if math.div($iteration, $count) == math.div(1, 2) {
     $val: ".#{$class}-half#{$mq}, ";
   }
 
-  @else if ($iteration/$count) == (2/3) {
+  @else if math.div($iteration, $count) == math.div(2, 3) {
     $val: ".#{$class}-two-third#{$mq}, .#{$class}-two-thirds#{$mq}, ";
   }
 
-  @else if ($iteration/$count) == (3/4) {
+  @else if math.div($iteration, $count) == math.div(3, 4) {
     $val: ".#{$class}-three-quarter#{$mq}, .#{$class}-three-quarters#{$mq}, ";
   }
 

test/test.scss

@@ -1,4 +1,5 @@
 // Requirements
+@use 'sass:math';
 @use '../node_modules/sass-true/sass/true';
 
 // TESTS

tools/ratio/_function.scss

@@ -30,5 +30,5 @@
 }
 
 @function ratio($height,$width) {
-  @return ($height / $width) * 100%;
+  @return math.div($height, $width) * 100%;
 }

tools/remify/_function.scss

@@ -31,5 +31,5 @@
 
 @function remify($value) {
   $value: strip-units($value);
-  @return ($value / 16) * 1rem;
+  @return math.div($value, 16) * 1rem;
 }

tools/strip-units/_function.scss

@@ -15,5 +15,5 @@
 }
 
 @function strip-units($number) {
-  @return $number / ($number * 0 + 1);
+  @return math.div($number, ($number * 0 + 1));
 }