fix "slash-div error" when use dart-sass

lib/compass/layout/_grid-background.sass

@@ -1,3 +1,5 @@
+@use "sass:math"
+
 @import ../css3/images
 @import ../css3/background-size
 
@@ -79,9 +81,9 @@ $grid-background-force-fluid: false !default
 // Convert a grid from fixed units into percentages.
 @function get-column-fluid-grid($total: $grid-background-total-columns, $column: $grid-background-column-width, $gutter: $grid-background-gutter-width, $offset: $grid-background-offset, $column-color: $grid-background-column-color, $gutter-color: $grid-background-gutter-color)
   $context: $column * $total + $gutter * ($total - 1) + $offset * 2
-  $offset: $offset / $context * 100%
-  $column: $column / $context * 100%
-  $gutter: $gutter / $context * 100%
+  $offset: math.div($offset, $context) * 100%
+  $column: math.div($column, $context) * 100%
+  $gutter: math.div($gutter, $context) * 100%
   // return the horizontal grid as a set of color-stops
   $grid: build-grid-background($total, $column, $gutter, $offset, $column-color, $gutter-color)
   @return $grid

lib/compass/typography/_vertical_rhythm.sass

@@ -1,3 +1,5 @@
+@use "sass:math"
+
 @import ../layout/grid-background
 
 // The base font size.
@@ -29,15 +31,15 @@ $min-line-padding: 2px !default
 $font-unit: if($relative-font-sizing, 1em, $base-font-size) !default
 
 // The basic unit of font rhythm.
-$base-rhythm-unit: $base-line-height / $base-font-size * $font-unit
+$base-rhythm-unit: math.div($base-line-height, $base-font-size) * $font-unit
 
 // The leader is the amount of whitespace in a line.
 // It might be useful in your calculations.
-$base-leader: ($base-line-height - $base-font-size) * $font-unit / $base-font-size
+$base-leader: math.div(($base-line-height - $base-font-size) * $font-unit, $base-font-size)
 
 // The half-leader is the amount of whitespace above and below a line.
 // It might be useful in your calculations.
-$base-half-leader: $base-leader / 2
+$base-half-leader: math.div($base-leader, 2)
 
 // True if a number has a relative unit.
 @function relative-unit($number)
@@ -56,7 +58,7 @@ $base-half-leader: $base-leader / 2
   // whose root is set in ems. So we set the root font size in percentages of
   // the default font size.
   * html
-    font-size: 100% * $font-size / $browser-default-font-size
+    font-size: math.div(100% * $font-size, $browser-default-font-size)
   html
     font-size: $font-size
     +adjust-leading-to(1, if($relative-font-sizing, $font-size, $base-font-size))
@@ -86,7 +88,7 @@ $base-half-leader: $base-leader / 2
 =adjust-font-size-to($to-size, $lines: lines-for-font-size($to-size), $from-size: $base-font-size)
   @if not $relative-font-sizing and $from-size != $base-font-size
     @warn "$relative-font-sizing is false but a relative font size was passed to adjust-font-size-to"
-  font-size: $font-unit * $to-size / $from-size
+  font-size: math.div($font-unit * $to-size, $from-size)
   +adjust-leading-to($lines, if($relative-font-sizing, $to-size, $base-font-size))
 
 // Adjust a block to have different line height to maintain the rhythm.
@@ -100,15 +102,15 @@ $base-half-leader: $base-leader / 2
 @function rhythm($lines: 1, $font-size: $base-font-size, $offset: 0)
   @if not $relative-font-sizing and $font-size != $base-font-size
     @warn "$relative-font-sizing is false but a relative font size was passed to the rhythm function"
-  $rhythm: $font-unit * ($lines * $base-line-height - $offset) / $font-size
+  $rhythm: math.div($font-unit * ($lines * $base-line-height - $offset), $font-size)
   // Round the pixels down to nearest integer.
   @if unit($rhythm) == px
     $rhythm: floor($rhythm)
   @return $rhythm
 
 // Calculate the minimum multiple of rhythm units needed to contain the font-size.
 @function lines-for-font-size($font-size)
-  $lines: if($round-to-nearest-half-line, ceil(2 * $font-size / $base-line-height) / 2, ceil($font-size / $base-line-height))
+  $lines: if($round-to-nearest-half-line, math.div(ceil(math.div(2 * $font-size, $base-line-height)), 2), ceil(math.div($font-size, $base-line-height)))
   @if $lines * $base-line-height - $font-size < $min-line-padding * 2
     $lines: $lines + if($round-to-nearest-half-line, 0.5, 1)
   @return $lines
@@ -150,7 +152,7 @@ $base-half-leader: $base-leader / 2
   @if not $relative-font-sizing and $font-size != $base-font-size
     @warn "$relative-font-sizing is false but a relative font size was passed to apply-side-rhythm-border"
   border-#{$side}-style: $border-style
-  border-#{$side}-width: $font-unit * $width / $font-size
+  border-#{$side}-width: math.div($font-unit * $width, $font-size)
   padding-#{$side}: rhythm($lines, $font-size, $offset: $width)
 
 // Apply borders and whitespace equally to all sides.
@@ -159,7 +161,7 @@ $base-half-leader: $base-leader / 2
     @warn "$relative-font-sizing is false but a relative font size was passed to rhythm-borders"
   border:
     style: $border-style
-    width: $font-unit * $width / $font-size
+    width: math.div($font-unit * $width, $font-size)
   padding: rhythm($lines, $font-size, $offset: $width)
 
 // Apply a leading border.

lib/compass/typography/lists/_bullets.sass

@@ -1,3 +1,5 @@
+@use "sass:math"
+
 // Turn off the bullet for an element of a list
 =no-bullet
   list-style-image: none
@@ -27,5 +29,5 @@
   margin-left: 0
   li
     padding-left: $padding
-    background: image-url($bullet-icon) no-repeat (($padding - $width) / 2) (($line-height - $height) / 2)
+    background: image-url($bullet-icon) no-repeat (math.div(($padding - $width), 2)) (math.div(($line-height - $height), 2))
     list-style-type: none

lib/compass/utilities/general/_tag-cloud.sass

@@ -1,18 +1,20 @@
+@use "sass:math"
+
 // Emits styles for a tag cloud
 =tag-cloud($base-size: 1em)
   font-size: $base-size
   line-height: 1.2 * $base-size
   .xxs, .xs, .s, .l, .xl, .xxl
     line-height: 1.2 * $base-size
   .xxs
-    font-size: $base-size / 2
+    font-size: math.div($base-size, 2)
   .xs
-    font-size: 2 * $base-size / 3
+    font-size: math.div(2 * $base-size, 3)
   .s
-    font-size: 3 * $base-size / 4
+    font-size: math.div(3 * $base-size, 4)
   .l
-    font-size: 4 * $base-size / 3
+    font-size: math.div(4 * $base-size, 3)
   .xl
-    font-size: 3 * $base-size / 2
+    font-size: math.div(3 * $base-size, 2)
   .xxl
     font-size: 2 * $base-size