From a4043f41f539ed910c80c780e1815f5625282b94 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 8 Jun 2021 19:01:30 +0200
Subject: [PATCH] refactor(multiple): fix warnings related to division operator
 in latest version of Sass (#22871)

The latest version of Sass prints a warning when the division operator is used. These changes migrate us to the recommended `math.div` function.

Fixes #22866.
---
 WORKSPACE                                     |  8 ++---
 package.json                                  |  2 +-
 src/material-experimental/mdc-card/card.scss  |  3 +-
 .../mdc-form-field/_form-field-density.scss   |  5 ++--
 .../_form-field-native-select.scss            |  5 ++--
 .../mdc-select/select.scss                    |  7 +++--
 .../mdc-slide-toggle/slide-toggle.scss        |  5 ++--
 src/material/badge/_badge-theme.scss          | 13 +++++----
 src/material/card/card.scss                   |  4 +--
 src/material/checkbox/checkbox.scss           |  2 +-
 src/material/core/option/option.scss          |  3 +-
 .../pseudo-checkbox/pseudo-checkbox.scss      | 11 +++----
 src/material/core/style/_menu-common.scss     |  3 +-
 src/material/core/style/_private.scss         | 27 +++++++++++++++++
 .../core/typography/_typography-utils.scss    |  6 ++--
 src/material/datepicker/BUILD.bazel           |  5 +++-
 src/material/datepicker/calendar-body.scss    |  3 +-
 src/material/datepicker/date-range-input.scss |  6 ++--
 .../form-field/_form-field-fill-theme.scss    |  3 +-
 .../form-field/_form-field-legacy-theme.scss  |  9 +++---
 .../form-field/_form-field-outline-theme.scss |  5 ++--
 .../form-field/_form-field-theme.scss         |  7 +++--
 src/material/form-field/form-field-fill.scss  |  3 +-
 src/material/form-field/form-field-input.scss |  6 ++--
 .../form-field/form-field-outline.scss        |  3 +-
 src/material/input/_input-theme.scss          |  3 +-
 .../progress-spinner/progress-spinner.scss    |  4 +--
 src/material/radio/radio.scss                 |  3 +-
 src/material/select/select.scss               |  4 ++-
 src/material/slide-toggle/slide-toggle.scss   |  7 +++--
 src/material/slider/slider.scss               | 29 ++++++++++---------
 src/material/snack-bar/simple-snack-bar.scss  |  4 ++-
 src/material/stepper/_stepper-theme.scss      |  7 +++--
 src/material/stepper/stepper.scss             |  4 ++-
 src/material/tooltip/_tooltip-theme.scss      |  5 ++--
 yarn.lock                                     |  8 ++---
 36 files changed, 149 insertions(+), 83 deletions(-)

diff --git a/WORKSPACE b/WORKSPACE
index 59868615bee2..62003f8260f3 100644
--- a/WORKSPACE
+++ b/WORKSPACE
@@ -15,11 +15,11 @@ http_archive(
 # Add sass rules
 http_archive(
     name = "io_bazel_rules_sass",
-    sha256 = "c310ba8fe69cce7793954a7f1778b65a86b06690215a504751e12b7df3ab51f8",
-    strip_prefix = "rules_sass-1.32.13",
+    sha256 = "80d3e70ab5a8d59494aa9e3a7e4722f9f9a6fe98d1497be6bfa0b9e106b1ea54",
+    strip_prefix = "rules_sass-1.34.1",
     urls = [
-        "https://github.com/bazelbuild/rules_sass/archive/1.32.13.zip",
-        "https://mirror.bazel.build/github.com/bazelbuild/rules_sass/archive/1.32.13.zip",
+        "https://github.com/bazelbuild/rules_sass/archive/1.34.1.zip",
+        "https://mirror.bazel.build/github.com/bazelbuild/rules_sass/archive/1.34.1.zip",
     ],
 )
 
diff --git a/package.json b/package.json
index 870408d682e5..641d6bfe0e0f 100644
--- a/package.json
+++ b/package.json
@@ -210,7 +210,7 @@
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
-    "sass": "^1.32.13",
+    "sass": "^1.34.1",
     "selenium-webdriver": "^3.6.0",
     "semver": "^7.3.4",
     "send": "^0.17.1",
diff --git a/src/material-experimental/mdc-card/card.scss b/src/material-experimental/mdc-card/card.scss
index 5f63618075bb..c82d69bd6ead 100644
--- a/src/material-experimental/mdc-card/card.scss
+++ b/src/material-experimental/mdc-card/card.scss
@@ -1,4 +1,5 @@
 @use '@material/card' as mdc-card;
+@use '../../material/core/style/private';
 @use '../mdc-helpers/mdc-helpers';
 
 // TODO(jelbourn): move header and title-group styles to their own files.
@@ -43,7 +44,7 @@ $mat-card-default-padding: 16px !default;
   // When a subtitle is inside of a header, we want to move it up slightly to reduce the space with
   // the title, and add a margin bottom to create space underneath the header.
   .mat-mdc-card-subtitle {
-    margin-top: -($mat-card-default-padding / 2);
+    margin-top: -(private.private-div($mat-card-default-padding, 2));
     margin-bottom: $mat-card-default-padding;
   }
 }
diff --git a/src/material-experimental/mdc-form-field/_form-field-density.scss b/src/material-experimental/mdc-form-field/_form-field-density.scss
index fa9b3c312d61..4596d9f49e49 100644
--- a/src/material-experimental/mdc-form-field/_form-field-density.scss
+++ b/src/material-experimental/mdc-form-field/_form-field-density.scss
@@ -2,6 +2,7 @@
 @use '@material/textfield' as mdc-textfield;
 @use 'sass:map';
 @use '../../material/core/theming/theming';
+@use '../../material/core/style/private';
 @use 'form-field-sizing';
 
 // Mixin that sets the vertical spacing for the infix container of filled form fields.
@@ -54,7 +55,7 @@
   // cannot update the spacing to explicit numbers based on the density scale. Instead, we
   // determine the height reduction and equally subtract it from the default `top` and `bottom`
   // padding that is provided by the Material Design specification.
-  $vertical-deduction: (mdc-textfield.$height - $height) / 2;
+  $vertical-deduction: private.private-div(mdc-textfield.$height - $height, 2);
   // Map that describes the padding for form-fields with label.
   $with-label-padding: (
     top: form-field-sizing.$mat-form-field-with-label-input-padding-top - $vertical-deduction,
@@ -77,7 +78,7 @@
   // form-field because we do not know what type of form-field control is set up. Hence
   // we always use a fixed position for the label. This does not have any implications.
   .mat-mdc-form-field .mat-mdc-text-field-wrapper .mdc-floating-label {
-    top: $height / 2;
+    top: private.private-div($height, 2);
   }
 
   // For the outline appearance, we re-create the active floating label transform. This is
diff --git a/src/material-experimental/mdc-form-field/_form-field-native-select.scss b/src/material-experimental/mdc-form-field/_form-field-native-select.scss
index ae4ee91aa419..0cda173843c2 100644
--- a/src/material-experimental/mdc-form-field/_form-field-native-select.scss
+++ b/src/material-experimental/mdc-form-field/_form-field-native-select.scss
@@ -2,6 +2,7 @@
 @use '../mdc-helpers/mdc-helpers';
 @use '../../cdk/a11y';
 @use '../../material/core/theming/palette';
+@use '../../material/core/style/private';
 @use '@material/theme/theme-color' as mdc-theme-color;
 
 // Width of the Material Design form-field select arrow.
@@ -65,8 +66,8 @@ $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-widt
       content: '';
       width: 0;
       height: 0;
-      border-left: ($mat-form-field-select-arrow-width / 2) solid transparent;
-      border-right: ($mat-form-field-select-arrow-width / 2) solid transparent;
+      border-left: private.private-div($mat-form-field-select-arrow-width, 2) solid transparent;
+      border-right: private.private-div($mat-form-field-select-arrow-width, 2) solid transparent;
       border-top: $mat-form-field-select-arrow-height solid;
       position: absolute;
       right: 0;
diff --git a/src/material-experimental/mdc-select/select.scss b/src/material-experimental/mdc-select/select.scss
index d0c42ad39c40..8acfd9c9e892 100644
--- a/src/material-experimental/mdc-select/select.scss
+++ b/src/material-experimental/mdc-select/select.scss
@@ -2,6 +2,7 @@
 @use '@material/list' as mdc-list;
 @use '../../material/core/style/variables';
 @use '../../material/core/style/vendor-prefixes';
+@use '../../material/core/style/private';
 @use '../../cdk/a11y';
 
 $mat-select-arrow-size: 5px !default;
@@ -105,7 +106,8 @@ $scale: 0.75 !default;
 .mat-mdc-select-placeholder {
   // Delay the transition until the label has animated about a third of the way through, in
   // order to prevent the placeholder from overlapping for a split second.
-  transition: color variables.$swift-ease-out-duration variables.$swift-ease-out-duration / 3
+  transition: color variables.$swift-ease-out-duration
+      private.private-div(variables.$swift-ease-out-duration, 3)
       variables.$swift-ease-out-timing-function;
 
   ._mat-animation-noopable & {
@@ -137,7 +139,8 @@ $scale: 0.75 !default;
     }
 
     .mdc-floating-label--float-above {
-      max-width: calc(100% / #{$scale} - #{$mat-select-placeholder-arrow-space / $scale});
+      $arrow-scale: private.private-div($mat-select-placeholder-arrow-space, $scale);
+      max-width: calc(100% / #{$scale} - #{$arrow-scale});
     }
   }
   &.mat-form-field-appearance-outline {
diff --git a/src/material-experimental/mdc-slide-toggle/slide-toggle.scss b/src/material-experimental/mdc-slide-toggle/slide-toggle.scss
index c830ab3bf3d1..94b3485f8855 100644
--- a/src/material-experimental/mdc-slide-toggle/slide-toggle.scss
+++ b/src/material-experimental/mdc-slide-toggle/slide-toggle.scss
@@ -1,9 +1,10 @@
+@use 'sass:map';
 @use '@material/switch/deprecated' as mdc-switch with ($deprecated-suffix: '');
 @use '@material/form-field' as mdc-form-field;
 @use '@material/ripple' as mdc-ripple;
-@use 'sass:map';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/style/layout-common';
+@use '../../material/core/style/private';
 @use '../../cdk/a11y';
 
 @include mdc-switch.without-ripple($query: mdc-helpers.$mat-base-styles-query);
@@ -87,7 +88,7 @@
       // Usually 1px would be enough, but MDC reduces the opacity on the
       // element so we need to make this a bit more prominent.
       outline: solid 2px;
-      outline-offset: mdc-switch.$track-height / 2;
+      outline-offset: private.private-div(mdc-switch.$track-height, 2);
     }
   }
 }
diff --git a/src/material/badge/_badge-theme.scss b/src/material/badge/_badge-theme.scss
index 724fc8bcf58c..8807326d67b8 100644
--- a/src/material/badge/_badge-theme.scss
+++ b/src/material/badge/_badge-theme.scss
@@ -7,6 +7,7 @@
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';
+@use '../core/style/private';
 @use '../../cdk/a11y';
 
 $font-size: 12px;
@@ -25,13 +26,13 @@ $large-size: $default-size + 6;
 
   &.mat-badge-above {
     .mat-badge-content {
-      top: -$size / 2;
+      top: private.private-div(-$size, 2);
     }
   }
 
   &.mat-badge-below {
     .mat-badge-content {
-      bottom: -$size / 2;
+      bottom: private.private-div(-$size, 2);
     }
   }
 
@@ -64,27 +65,27 @@ $large-size: $default-size + 6;
   &.mat-badge-overlap {
     &.mat-badge-before {
       .mat-badge-content {
-        left: -$size / 2;
+        left: private.private-div(-$size, 2);
       }
     }
 
     [dir='rtl'] &.mat-badge-before {
       .mat-badge-content {
         left: auto;
-        right: -$size / 2;
+        right: private.private-div(-$size, 2);
       }
     }
 
     &.mat-badge-after {
       .mat-badge-content {
-        right: -$size / 2;
+        right: private.private-div(-$size, 2);
       }
     }
 
     [dir='rtl'] &.mat-badge-after {
       .mat-badge-content {
         right: auto;
-        left: -$size / 2;
+        left: private.private-div(-$size, 2);
       }
     }
   }
diff --git a/src/material/card/card.scss b/src/material/card/card.scss
index 5369443f0f87..9220a1fcc137 100644
--- a/src/material/card/card.scss
+++ b/src/material/card/card.scss
@@ -59,8 +59,8 @@ $header-size: 40px !default;
 
 .mat-card-actions {
   @extend %mat-card-section-base;
-  margin-left: -$padding / 2;
-  margin-right: -$padding / 2;
+  margin-left: private.private-div(-$padding, 2);
+  margin-right: private.private-div(-$padding, 2);
   padding: 8px 0;
 }
 
diff --git a/src/material/checkbox/checkbox.scss b/src/material/checkbox/checkbox.scss
index 5426e10e4f12..d09c88bd7cab 100644
--- a/src/material/checkbox/checkbox.scss
+++ b/src/material/checkbox/checkbox.scss
@@ -18,7 +18,7 @@ $_ripple-radius: 20px;
 $_item-spacing: variables.$toggle-padding;
 
 // The width of the line used to draw the checkmark / mixedmark.
-$_mark-stroke-size: 2 / 15 * checkbox-common.$size !default;
+$_mark-stroke-size: private.private-div(2, 15) * checkbox-common.$size !default;
 
 
 // Fades in the background of the checkbox when it goes from unchecked -> {checked,indeterminate}.
diff --git a/src/material/core/option/option.scss b/src/material/core/option/option.scss
index e1e60c8cfef1..9e3ac2aa67a6 100644
--- a/src/material/core/option/option.scss
+++ b/src/material/core/option/option.scss
@@ -1,6 +1,7 @@
 @use '../style/menu-common';
 @use '../style/vendor-prefixes';
 @use '../style/layout-common';
+@use '../style/private';
 @use '../../../cdk/a11y';
 
 .mat-option {
@@ -77,7 +78,7 @@
 }
 
 .mat-option-pseudo-checkbox {
-  $margin: menu-common.$side-padding / 2;
+  $margin: private.private-div(menu-common.$side-padding, 2);
   margin-right: $margin;
 
   [dir='rtl'] & {
diff --git a/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss b/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss
index 397a64ebe596..c505dace5425 100644
--- a/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss
+++ b/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss
@@ -50,19 +50,20 @@ $_checkmark-size: checkbox-common.$size - (2 * $_padding);
 }
 
 .mat-pseudo-checkbox-indeterminate::after {
-  top: (checkbox-common.$size - checkbox-common.$border-width) / 2 - checkbox-common.$border-width;
-  left: checkbox-common.$border-width / 2;
+  top: private.private-div(checkbox-common.$size - checkbox-common.$border-width, 2) -
+      checkbox-common.$border-width;
+  left: private.private-div(checkbox-common.$border-width, 2);
   width: checkbox-common.$size - 6px;
   opacity: 1;
   border-radius: 2px;
 }
 
 .mat-pseudo-checkbox-checked::after {
-  top: (checkbox-common.$size / 2) - ($_checkmark-size / 4) -
-      (checkbox-common.$size / 10) - checkbox-common.$border-width;
+  top: private.private-div(checkbox-common.$size, 2) - private.private-div($_checkmark-size, 4) -
+      private.private-div(checkbox-common.$size, 10) - checkbox-common.$border-width;
   left: $_padding - checkbox-common.$border-width * 1.5;
   width: $_checkmark-size;
-  height: ($_checkmark-size - checkbox-common.$border-width) / 2;
+  height: private.private-div($_checkmark-size - checkbox-common.$border-width, 2);
   border-left: checkbox-common.$border-width solid currentColor;
   transform: rotate(-45deg);
   opacity: 1;
diff --git a/src/material/core/style/_menu-common.scss b/src/material/core/style/_menu-common.scss
index 41b7f3bab0ce..3abcaece969f 100644
--- a/src/material/core/style/_menu-common.scss
+++ b/src/material/core/style/_menu-common.scss
@@ -1,3 +1,4 @@
+@use './private';
 @use './list-common';
 @use './layout-common';
 
@@ -63,7 +64,7 @@ $icon-margin: 16px !default;
 
   // Renders a triangle to indicate that the menu item will open a sub-menu.
   &::after {
-    $size: $triangle-height / 2;
+    $size: private.private-div($triangle-height, 2);
 
     width: 0;
     height: 0;
diff --git a/src/material/core/style/_private.scss b/src/material/core/style/_private.scss
index 2eecc6c575a3..e08f6f2ca8e2 100644
--- a/src/material/core/style/_private.scss
+++ b/src/material/core/style/_private.scss
@@ -1,4 +1,7 @@
 @use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:list';
 @use './elevation';
 
 @mixin private-theme-elevation($zValue, $config, $opacity: elevation.$opacity) {
@@ -39,3 +42,27 @@
     @content;
   }
 }
+
+// Private polyfill for the `math.div` function from Sass to be used until we can update the
+// minimum required Sass version to 1.34.0 or above.
+// TODO(crisbeto): replace with `math.div` eventually.
+@function private-div($a, $b) {
+  @if (meta.function-exists('div', 'math')) {
+    @return math.div($a, $b);
+  }
+  @else {
+    @return $a / $b;
+  }
+}
+
+// Private polyfill for the `list.slash` function from Sass to be used until we can update the
+// minimum required Sass version to 1.34.0 or above.
+// TODO(crisbeto): replace with `list.slash` eventually.
+@function private-slash($a, $b) {
+  @if (meta.function-exists('slash', 'list')) {
+    @return list.slash($a, $b);
+  }
+  @else {
+    @return #{$a}#{' / '}#{$b};
+  }
+}
diff --git a/src/material/core/typography/_typography-utils.scss b/src/material/core/typography/_typography-utils.scss
index 11ca3f01db24..4dcee44fd7eb 100644
--- a/src/material/core/typography/_typography-utils.scss
+++ b/src/material/core/typography/_typography-utils.scss
@@ -1,6 +1,8 @@
+@use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
+@use '../style/private';
 
 
 // Utility for fetching a nested value from a typography config.
@@ -76,9 +78,9 @@
   }
   @else {
     // Otherwise use the shorthand `font`, because it's the least amount of bytes. Note
-    // that we need to use interpolation for `font-size/line-height` in order to prevent
+    // that we need to use `list.slash` for `font-size/line-height` in order to prevent
     // Sass from dividing the two values.
-    font: $font-weight #{$font-size}/#{$line-height} $font-family;
+    font: $font-weight private.private-slash($font-size, $line-height) $font-family;
   }
 }
 
diff --git a/src/material/datepicker/BUILD.bazel b/src/material/datepicker/BUILD.bazel
index bafe443428a2..914f6401b8c7 100644
--- a/src/material/datepicker/BUILD.bazel
+++ b/src/material/datepicker/BUILD.bazel
@@ -72,7 +72,10 @@ sass_binary(
 sass_binary(
     name = "calendar_body_scss",
     src = "calendar-body.scss",
-    deps = ["//src/cdk/a11y:a11y_scss_lib"],
+    deps = [
+        "//src/cdk/a11y:a11y_scss_lib",
+        "//src/material/core:core_scss_lib",
+    ],
 )
 
 sass_binary(
diff --git a/src/material/datepicker/calendar-body.scss b/src/material/datepicker/calendar-body.scss
index a58c7b2798fc..277569c1c104 100644
--- a/src/material/datepicker/calendar-body.scss
+++ b/src/material/datepicker/calendar-body.scss
@@ -1,3 +1,4 @@
+@use '../core/style/private';
 @use '../../cdk/a11y';
 
 $calendar-body-label-padding-start: 5% !default;
@@ -5,7 +6,7 @@ $calendar-body-label-padding-start: 5% !default;
 // the same amount of padding regardless of the number of columns. We align the header label with
 // the one third mark of the first cell, this was chosen somewhat arbitrarily to make it look
 // roughly like the mock. Half way is too far since the cell text is center aligned.
-$calendar-body-label-side-padding: 33% / 7 !default;
+$calendar-body-label-side-padding: private.private-div(33%, 7) !default;
 $calendar-body-cell-min-size: 32px !default;
 $calendar-body-cell-content-margin: 5% !default;
 $calendar-body-cell-content-border-width: 1px !default;
diff --git a/src/material/datepicker/date-range-input.scss b/src/material/datepicker/date-range-input.scss
index afe7b2563614..bce7fbbfe418 100644
--- a/src/material/datepicker/date-range-input.scss
+++ b/src/material/datepicker/date-range-input.scss
@@ -1,13 +1,15 @@
 @use '../core/style/variables';
 @use '../core/style/vendor-prefixes';
+@use '../core/style/private';
 @use '../../cdk/a11y';
 
 $date-range-input-separator-spacing: 4px;
 $date-range-input-part-max-width: calc(50% - #{$date-range-input-separator-spacing});
 
 @mixin _placeholder-transition($property) {
-  transition: #{$property} variables.$swift-ease-out-duration variables.$swift-ease-out-duration / 3
-      variables.$swift-ease-out-timing-function;
+  transition: #{$property} variables.$swift-ease-out-duration
+    private.private-div(variables.$swift-ease-out-duration, 3)
+    variables.$swift-ease-out-timing-function;
 }
 
 // Host of the date range input.
diff --git a/src/material/form-field/_form-field-fill-theme.scss b/src/material/form-field/_form-field-fill-theme.scss
index 941bda9ba79e..24675611df49 100644
--- a/src/material/form-field/_form-field-fill-theme.scss
+++ b/src/material/form-field/_form-field-fill-theme.scss
@@ -2,6 +2,7 @@
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';
+@use '../core/style/private';
 
 
 // Theme styles that only apply to the fill appearance of the form-field.
@@ -54,7 +55,7 @@ $fill-dedupe: 0;
 @mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {
   transform: translateY(-$infix-margin-top - $infix-padding + $fill-dedupe)
              scale($font-scale);
-  width: 100% / $font-scale + $fill-dedupe;
+  width: private.private-div(100%, $font-scale) + $fill-dedupe;
 
   $fill-dedupe: $fill-dedupe + 0.00001 !global;
 }
diff --git a/src/material/form-field/_form-field-legacy-theme.scss b/src/material/form-field/_form-field-legacy-theme.scss
index 9f3c8ad96017..014f301c1e02 100644
--- a/src/material/form-field/_form-field-legacy-theme.scss
+++ b/src/material/form-field/_form-field-legacy-theme.scss
@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '../core/theming/theming';
+@use '../core/style/private';
 @use '../core/style/form-common';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';
@@ -54,7 +55,7 @@ $legacy-dedupe: 0;
   -ms-transform: translateY(-$infix-margin-top - $infix-padding + $legacy-dedupe)
                   scale($font-scale);
 
-  width: 100% / $font-scale + $legacy-dedupe;
+  width: private.private-div(100%, $font-scale) + $legacy-dedupe;
 
   $legacy-dedupe: $legacy-dedupe + 0.00001 !global;
 }
@@ -79,7 +80,7 @@ $legacy-dedupe: 0;
   $subscript-font-scale: 0.75;
   // The amount of space between the top of the line and the top of the actual text
   // (as a fraction of the font-size).
-  $line-spacing: ($line-height - 1) / 2;
+  $line-spacing: private.private-div($line-height - 1, 2);
   // The padding on the infix. Mocks show half of the text size, but seem to measure from the edge
   // of the text itself, not the edge of the line; therefore we subtract off the line spacing.
   $infix-padding: 0.5em - $line-spacing;
@@ -90,7 +91,7 @@ $legacy-dedupe: 0;
   // text font size, so we need to divide by the scale factor to make it half of the original text
   // size. We again need to subtract off the line spacing since the mocks measure to the edge of the
   // text, not the  edge of the line.
-  $subscript-margin-top: 0.5em / $subscript-font-scale - ($line-spacing * 2);
+  $subscript-margin-top: private.private-div(0.5em, $subscript-font-scale) - ($line-spacing * 2);
   // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's
   // absolutely positioned. This is a combination of the subscript's margin and line-height, but we
   // need to multiply by the subscript font scale factor since the wrapper has a larger font size.
@@ -143,7 +144,7 @@ $legacy-dedupe: 0;
 
       // We want the subscript to start at the end of the content box, not the padding box,
       // so we move it up by the padding amount (adjusted for the smaller font size);
-      top: calc(100% - #{$wrapper-padding-bottom / $subscript-font-scale});
+      top: calc(100% - #{private.private-div($wrapper-padding-bottom, $subscript-font-scale)});
     }
   }
 
diff --git a/src/material/form-field/_form-field-outline-theme.scss b/src/material/form-field/_form-field-outline-theme.scss
index 3e9dd487f944..513845e4f705 100644
--- a/src/material/form-field/_form-field-outline-theme.scss
+++ b/src/material/form-field/_form-field-outline-theme.scss
@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '../core/theming/theming';
+@use '../core/style/private';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 
@@ -77,7 +78,7 @@ $outline-dedupe: 0;
 @mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {
   transform: translateY(-$infix-margin-top - $infix-padding + $outline-dedupe)
   scale($font-scale);
-  width: 100% / $font-scale + $outline-dedupe;
+  width: private.private-div(100%, $font-scale) + $outline-dedupe;
 
   $outline-dedupe: $outline-dedupe + 0.00001 !global;
 }
@@ -97,7 +98,7 @@ $outline-dedupe: 0;
   // Mocks show half of the text size, but this margin is applied to an element with the subscript
   // text font size, so we need to divide by the scale factor to make it half of the original text
   // size.
-  $subscript-margin-top: 0.5em / $subscript-font-scale;
+  $subscript-margin-top: private.private-div(0.5em, $subscript-font-scale);
   // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's
   // absolutely positioned. This is a combination of the subscript's margin and line-height, but we
   // need to multiply by the subscript font scale factor since the wrapper has a larger font size.
diff --git a/src/material/form-field/_form-field-theme.scss b/src/material/form-field/_form-field-theme.scss
index 6240f652e53f..245cf465d4d9 100644
--- a/src/material/form-field/_form-field-theme.scss
+++ b/src/material/form-field/_form-field-theme.scss
@@ -2,6 +2,7 @@
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';
+@use '../core/style/private';
 
 @use './form-field-fill-theme.scss';
 @use './form-field-legacy-theme.scss';
@@ -126,7 +127,7 @@ $dedupe: 0;
 @mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {
   transform: translateY(-$infix-margin-top - $infix-padding + $dedupe)
              scale($font-scale);
-  width: 100% / $font-scale + $dedupe;
+  width: private.private-div(100%, $font-scale) + $dedupe;
 
   $dedupe: $dedupe + 0.00001 !global;
 }
@@ -154,7 +155,7 @@ $dedupe: 0;
   // Mocks show half of the text size, but this margin is applied to an element with the subscript
   // text font size, so we need to divide by the scale factor to make it half of the original text
   // size.
-  $subscript-margin-top: 0.5em / $subscript-font-scale;
+  $subscript-margin-top: private.private-div(0.5em, $subscript-font-scale);
   // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's
   // absolutely positioned. This is a combination of the subscript's margin and line-height, but we
   // need to multiply by the subscript font scale factor since the wrapper has a larger font size.
@@ -231,7 +232,7 @@ $dedupe: 0;
 
     // We want the subscript to start at the end of the content box, not the padding box,
     // so we move it up by the padding amount (adjusted for the smaller font size);
-    top: calc(100% - #{$wrapper-padding-bottom / $subscript-font-scale});
+    top: calc(100% - #{private.private-div($wrapper-padding-bottom, $subscript-font-scale)});
   }
 
   @include form-field-legacy-theme.legacy-typography($config);
diff --git a/src/material/form-field/form-field-fill.scss b/src/material/form-field/form-field-fill.scss
index 33e26bb28364..38c8d69eea37 100644
--- a/src/material/form-field/form-field-fill.scss
+++ b/src/material/form-field/form-field-fill.scss
@@ -1,4 +1,5 @@
 @use '../core/style/variables';
+@use '../core/style/private';
 @use '../../cdk/a11y';
 
 // Styles that only apply to the fill appearance of the form-field.
@@ -18,7 +19,7 @@ $fill-line-spacing: 0.75em !default;
 $fill-subscript-font-scale: 0.75 !default;
 // The horizontal padding between the edge of the subscript box and the start of the subscript text.
 $fill-subscript-padding:
-    $fill-side-padding / $fill-subscript-font-scale;
+    private.private-div($fill-side-padding, $fill-subscript-font-scale);
 
 
 .mat-form-field-appearance-fill {
diff --git a/src/material/form-field/form-field-input.scss b/src/material/form-field/form-field-input.scss
index a5024cae093b..827f4e59caf8 100644
--- a/src/material/form-field/form-field-input.scss
+++ b/src/material/form-field/form-field-input.scss
@@ -1,5 +1,6 @@
 @use '../core/style/variables';
 @use '../core/style/vendor-prefixes';
+@use '../core/style/private';
 @use '../../cdk/a11y';
 
 // The Input element proper.
@@ -107,7 +108,8 @@
 
     // Delay the transition until the label has animated about a third of the way through, in
     // order to prevent the placeholder from overlapping for a split second.
-    transition: color variables.$swift-ease-out-duration variables.$swift-ease-out-duration / 3
+    transition: color variables.$swift-ease-out-duration
+      private.private-div(variables.$swift-ease-out-duration, 3)
       variables.$swift-ease-out-timing-function;
   }
 
@@ -217,7 +219,7 @@ select.mat-input-element {
     position: absolute;
     top: 50%;
     right: 0;
-    margin-top: -$arrow-size / 2;
+    margin-top: private.private-div(-$arrow-size, 2);
 
     // Make the arrow non-clickable so the user can click on the form control under it.
     pointer-events: none;
diff --git a/src/material/form-field/form-field-outline.scss b/src/material/form-field/form-field-outline.scss
index f5ad9b88bfd4..e4302ecdd8f6 100644
--- a/src/material/form-field/form-field-outline.scss
+++ b/src/material/form-field/form-field-outline.scss
@@ -1,4 +1,5 @@
 @use '../core/style/variables';
+@use '../core/style/private';
 
 // Styles that only apply to the outline appearance of the form-field.
 
@@ -16,7 +17,7 @@ $outline-width: 1px;
 $outline-thick-width: 2px;
 // The horizontal padding between the edge of the subscript box and the start of the subscript text.
 $outline-subscript-padding:
-    $outline-side-padding / $outline-subscript-font-scale;
+    private.private-div($outline-side-padding, $outline-subscript-font-scale);
 
 
 .mat-form-field-appearance-outline {
diff --git a/src/material/input/_input-theme.scss b/src/material/input/_input-theme.scss
index 9cf96d919ea3..7c489c6b4974 100644
--- a/src/material/input/_input-theme.scss
+++ b/src/material/input/_input-theme.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../core/theming/palette';
 @use '../core/theming/theming';
+@use '../core/style/private';
 @use '../core/style/form-common';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';
@@ -68,7 +69,7 @@
 
   // The amount of space between the top of the line and the top of the actual text
   // (as a fraction of the font-size).
-  $line-spacing: ($line-height - 1) / 2;
+  $line-spacing: private.private-div($line-height - 1, 2);
 
   // <input> elements seem to have their height set slightly too large on Safari causing the text to
   // be misaligned w.r.t. the placeholder. Adding this margin corrects it.
diff --git a/src/material/progress-spinner/progress-spinner.scss b/src/material/progress-spinner/progress-spinner.scss
index e4b35deb3807..e416fd0a725e 100644
--- a/src/material/progress-spinner/progress-spinner.scss
+++ b/src/material/progress-spinner/progress-spinner.scss
@@ -125,8 +125,8 @@ $_default-circumference: variables.$pi * $_default-radius * 2;
   // iterations to vary where the spin "lands".
   @keyframes mat-progress-spinner-stroke-rotate-fallback {
     @for $i from 0 through $fallback-iterations {
-      $percent: 100 / $fallback-iterations * $i;
-      $offset: 360 / $fallback-iterations;
+      $percent: private.private-div(100, $fallback-iterations) * $i;
+      $offset: private.private-div(360, $fallback-iterations);
       #{$percent}% { transform: rotate(#{$i * (360 * 3 + $offset)}deg); }
     }
   }
diff --git a/src/material/radio/radio.scss b/src/material/radio/radio.scss
index ceb4cc17b595..721979250dfd 100644
--- a/src/material/radio/radio.scss
+++ b/src/material/radio/radio.scss
@@ -1,6 +1,7 @@
 @use '../core/style/variables';
 @use '../core/ripple/ripple';
 @use '../core/style/vendor-prefixes';
+@use '../core/style/private';
 @use '../../cdk/a11y';
 
 
@@ -93,7 +94,7 @@ $ripple-radius: 20px;
     @include a11y.high-contrast(active, off) {
       // Since we use a background color to render the circle, it won't be
       // displayed in high contrast mode. Use a border as a fallback.
-      border: solid $size / 2;
+      border: solid private.private-div($size, 2);
     }
   }
 }
diff --git a/src/material/select/select.scss b/src/material/select/select.scss
index 402009da9364..2c345530cb56 100644
--- a/src/material/select/select.scss
+++ b/src/material/select/select.scss
@@ -2,6 +2,7 @@
 @use '../core/style/list-common';
 @use '../core/style/variables';
 @use '../core/style/vendor-prefixes';
+@use '../core/style/private';
 @use '../../cdk/a11y';
 
 $arrow-size: 5px !default;
@@ -127,7 +128,8 @@ $placeholder-arrow-space: 2 * ($arrow-size + $arrow-margin);
 .mat-select-placeholder {
   // Delay the transition until the label has animated about a third of the way through, in
   // order to prevent the placeholder from overlapping for a split second.
-  transition: color variables.$swift-ease-out-duration variables.$swift-ease-out-duration / 3
+  transition: color variables.$swift-ease-out-duration
+      private.private-div(variables.$swift-ease-out-duration, 3)
       variables.$swift-ease-out-timing-function;
 
   ._mat-animation-noopable & {
diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss
index 4f1ddfd6f042..7a865d0369f7 100644
--- a/src/material/slide-toggle/slide-toggle.scss
+++ b/src/material/slide-toggle/slide-toggle.scss
@@ -1,6 +1,7 @@
 @use '../core/style/variables';
 @use '../core/ripple/ripple';
 @use '../core/style/list-common';
+@use '../core/style/private';
 @use '../../cdk/a11y';
 
 $thumb-size: 20px !default;
@@ -88,7 +89,7 @@ $bar-track-width: $bar-width - $thumb-size;
 
 // The container includes the visual thumb and the ripple container element.
 .mat-slide-toggle-thumb-container {
-  $thumb-bar-vertical-padding: ($thumb-size - $bar-height) / 2;
+  $thumb-bar-vertical-padding: private.private-div($thumb-size - $bar-height, 2);
 
   position: absolute;
   z-index: 1;
@@ -140,7 +141,7 @@ $bar-track-width: $bar-width - $thumb-size;
 .mat-slide-toggle-input {
   // Move the input to the bottom and in the middle of the thumb.
   // Visual improvement to properly show browser popups when being required.
-  $horizontal-offset: $thumb-size / 2;
+  $horizontal-offset: private.private-div($thumb-size, 2);
 
   bottom: 0;
   left: $horizontal-offset;
@@ -228,6 +229,6 @@ $bar-track-width: $bar-width - $thumb-size;
   // because otherwise the opaque thumb element will hide the outline.
   .mat-slide-toggle.cdk-keyboard-focused .mat-slide-toggle-bar {
     outline: 2px dotted;
-    outline-offset: ($height - $bar-height) / 2;
+    outline-offset: private.private-div($height - $bar-height, 2);
   }
 }
diff --git a/src/material/slider/slider.scss b/src/material/slider/slider.scss
index 3fc617337928..f86bcde25a60 100644
--- a/src/material/slider/slider.scss
+++ b/src/material/slider/slider.scss
@@ -1,5 +1,6 @@
 @use '../core/style/variables';
 @use '../core/style/vendor-prefixes';
+@use '../core/style/private';
 @use '../../cdk/a11y';
 
 
@@ -123,8 +124,8 @@ $focus-ring-size: 30px !default;
   @extend %_mat-slider-cursor;
 
   position: absolute;
-  right: -$thumb-size / 2;
-  bottom: -$thumb-size / 2;
+  right: private.private-div(-$thumb-size, 2);
+  bottom: private.private-div(-$thumb-size, 2);
   box-sizing: border-box;
   width: $thumb-size;
   height: $thumb-size;
@@ -280,7 +281,7 @@ $focus-ring-size: 30px !default;
 
   .mat-slider-wrapper {
     height: $track-thickness;
-    top: ($thickness - $track-thickness) / 2;
+    top: private.private-div($thickness - $track-thickness, 2);
     left: $padding;
     right: $padding;
   }
@@ -316,7 +317,7 @@ $focus-ring-size: 30px !default;
     @include a11y.high-contrast(active, off) {
       height: 0;
       outline: solid $track-thickness;
-      top: $track-thickness / 2;
+      top: private.private-div($track-thickness, 2);
     }
   }
 
@@ -332,14 +333,14 @@ $focus-ring-size: 30px !default;
   }
 
   .mat-slider-focus-ring {
-    top: -$focus-ring-size / 2;
-    right: -$focus-ring-size / 2;
+    top: private.private-div(-$focus-ring-size, 2);
+    right: private.private-div(-$focus-ring-size, 2);
   }
 
   .mat-slider-thumb-label {
-    right: -$thumb-label-size / 2;
+    right: private.private-div(-$thumb-label-size, 2);
     top: -($thumb-label-size + $thumb-arrow-gap);
-    transform: translateY($thumb-label-size / 2 + $thumb-arrow-gap)
+    transform: translateY(private.private-div($thumb-label-size, 2) + $thumb-arrow-gap)
         scale(0.01)
         rotate(45deg);
   }
@@ -372,7 +373,7 @@ $focus-ring-size: 30px !default;
     width: $track-thickness;
     top: $padding;
     bottom: $padding;
-    left: ($thickness - $track-thickness) / 2;
+    left: private.private-div($thickness - $track-thickness, 2);
   }
 
   .mat-slider-wrapper::after {
@@ -406,13 +407,13 @@ $focus-ring-size: 30px !default;
     @include a11y.high-contrast(active, off) {
       width: 0;
       outline: solid $track-thickness;
-      left: $track-thickness / 2;
+      left: private.private-div($track-thickness, 2);
     }
   }
 
   .mat-slider-focus-ring {
-    bottom: -$focus-ring-size / 2;
-    left: -$focus-ring-size / 2;
+    bottom: private.private-div(-$focus-ring-size, 2);
+    left: private.private-div(-$focus-ring-size, 2);
   }
 
   .mat-slider-ticks {
@@ -431,9 +432,9 @@ $focus-ring-size: 30px !default;
   }
 
   .mat-slider-thumb-label {
-    bottom: -$thumb-label-size / 2;
+    bottom: private.private-div(-$thumb-label-size, 2);
     left: -($thumb-label-size + $thumb-arrow-gap);
-    transform: translateX($thumb-label-size / 2 + $thumb-arrow-gap)
+    transform: translateX(private.private-div($thumb-label-size, 2) + $thumb-arrow-gap)
         scale(0.01)
         rotate(-45deg);
   }
diff --git a/src/material/snack-bar/simple-snack-bar.scss b/src/material/snack-bar/simple-snack-bar.scss
index 5b5c65fc3825..7012a45bfd09 100644
--- a/src/material/snack-bar/simple-snack-bar.scss
+++ b/src/material/snack-bar/simple-snack-bar.scss
@@ -1,10 +1,12 @@
+@use '../core/style/private';
+
 $button-horizontal-margin: 8px !default;
 $button-height: 36px !default;
 $line-height: 20px !default;
 // Button vertical margin is used to ensure that a button height of 36px, when the containing
 // space falls below 36px.
 $button-vertical-margin:
-  -(($button-height - $line-height) / 2);
+  -(private.private-div($button-height - $line-height, 2));
 
 .mat-simple-snackbar {
   display: flex;
diff --git a/src/material/stepper/_stepper-theme.scss b/src/material/stepper/_stepper-theme.scss
index d311149c36be..93ffef821fc9 100644
--- a/src/material/stepper/_stepper-theme.scss
+++ b/src/material/stepper/_stepper-theme.scss
@@ -3,6 +3,7 @@
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 @use '../core/density/private/compatibility';
+@use '../core/style/private';
 @use './stepper-variables';
 
 @mixin color($config-or-theme) {
@@ -139,7 +140,7 @@
   $density-scale: theming.get-density-config($config-or-theme);
   $height: compatibility.private-density-prop-value(stepper-variables.$density-config,
     $density-scale, height);
-  $vertical-padding: ($height - stepper-variables.$label-header-height) / 2;
+  $vertical-padding: private.private-div($height - stepper-variables.$label-header-height, 2);
 
   @include compatibility.private-density-legacy-compatibility() {
     .mat-horizontal-stepper-header {
@@ -161,13 +162,13 @@
     // Ensures that the horizontal lines for the step header are centered vertically.
     .mat-stepper-label-position-bottom .mat-horizontal-stepper-header {
       &::after, &::before {
-        top: $vertical-padding + stepper-variables.$label-header-height / 2;
+        top: $vertical-padding + private.private-div(stepper-variables.$label-header-height, 2);
       }
     }
 
     // Ensures that the horizontal line for the step content is aligned centered vertically.
     .mat-stepper-label-position-bottom .mat-stepper-horizontal-line {
-      top: $vertical-padding + stepper-variables.$label-header-height / 2;
+      top: $vertical-padding + private.private-div(stepper-variables.$label-header-height, 2);
     }
   }
 }
diff --git a/src/material/stepper/stepper.scss b/src/material/stepper/stepper.scss
index a8250886be6a..d27d329df52f 100644
--- a/src/material/stepper/stepper.scss
+++ b/src/material/stepper/stepper.scss
@@ -1,4 +1,5 @@
 @use '../core/style/variables';
+@use '../core/style/private';
 @use './stepper-variables';
 
 .mat-stepper-vertical,
@@ -32,13 +33,14 @@
 }
 
 %mat-header-horizontal-line-label-position-bottom {
+  $half-side-gap: private.private-div(stepper-variables.$side-gap, 2);
   border-top-width: stepper-variables.$line-width;
   border-top-style: solid;
   content: '';
   display: inline-block;
   height: 0;
   position: absolute;
-  width: calc(50% - #{stepper-variables.$side-gap / 2 + stepper-variables.$line-gap});
+  width: calc(50% - #{$half-side-gap + stepper-variables.$line-gap});
 }
 
 .mat-horizontal-stepper-header {
diff --git a/src/material/tooltip/_tooltip-theme.scss b/src/material/tooltip/_tooltip-theme.scss
index be4db1dae20e..c94db3eca0f9 100644
--- a/src/material/tooltip/_tooltip-theme.scss
+++ b/src/material/tooltip/_tooltip-theme.scss
@@ -2,15 +2,16 @@
 @use '../core/theming/theming';
 @use '../core/typography/typography';
 @use '../core/typography/typography-utils';
+@use '../core/style/private';
 
 $target-height: 22px;
 $font-size: 10px;
-$vertical-padding: ($target-height - $font-size) / 2;
+$vertical-padding: private.private-div($target-height - $font-size, 2);
 
 $handset-target-height: 30px;
 $handset-font-size: 14px;
 $handset-vertical-padding:
-    ($handset-target-height - $handset-font-size) / 2;
+    private.private-div($handset-target-height - $handset-font-size, 2);
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
diff --git a/yarn.lock b/yarn.lock
index 30f32ba3917e..dd5795f766cd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11678,10 +11678,10 @@ sass@^1.26.3:
   dependencies:
     chokidar ">=2.0.0 <4.0.0"
 
-sass@^1.32.13:
-  version "1.32.13"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.32.13.tgz#8d29c849e625a415bce71609c7cf95e15f74ed00"
-  integrity sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==
+sass@^1.34.1:
+  version "1.34.1"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.34.1.tgz#30f45c606c483d47b634f1e7371e13ff773c96ef"
+  integrity sha512-scLA7EIZM+MmYlej6sdVr0HRbZX5caX5ofDT9asWnUJj21oqgsC+1LuNfm0eg+vM0fCTZHhwImTiCU0sx9h9CQ==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"