refactor(multiple): fix warnings related to division operator in latest version of Sass

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.

Author: crisbeto

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",
     ],
 )
 

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",

src/material-experimental/mdc-card/card.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use '@material/card' as mdc-card;
 @use '../mdc-helpers/mdc-helpers';
 
@@ -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: -(math.div($mat-card-default-padding, 2));
     margin-bottom: $mat-card-default-padding;
   }
 }

src/material-experimental/mdc-form-field/_form-field-density.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use '@material/density' as mdc-density;
 @use '@material/textfield' as mdc-textfield;
 @use 'sass:map';
@@ -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: math.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: math.div($height, 2);
   }
 
   // For the outline appearance, we re-create the active floating label transform. This is

src/material-experimental/mdc-form-field/_form-field-native-select.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use 'sass:map';
 @use '../mdc-helpers/mdc-helpers';
 @use '../../cdk/a11y';
@@ -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: math.div($mat-form-field-select-arrow-width, 2) solid transparent;
+      border-right: math.div($mat-form-field-select-arrow-width, 2) solid transparent;
       border-top: $mat-form-field-select-arrow-height solid;
       position: absolute;
       right: 0;

src/material-experimental/mdc-select/select.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use '@material/menu-surface' as mdc-menu-surface;
 @use '@material/list' as mdc-list;
 @use '../../material/core/style/variables';
@@ -105,8 +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
-      variables.$swift-ease-out-timing-function;
+  transition: color variables.$swift-ease-out-duration
+      math.div(variables.$swift-ease-out-duration, 3) variables.$swift-ease-out-timing-function;
 
   ._mat-animation-noopable & {
     transition: none;
@@ -137,7 +138,7 @@ $scale: 0.75 !default;
     }
 
     .mdc-floating-label--float-above {
-      max-width: calc(100% / #{$scale} - #{$mat-select-placeholder-arrow-space / $scale});
+      max-width: calc(100% / #{$scale} - #{math.div($mat-select-placeholder-arrow-space, $scale)});
     }
   }
   &.mat-form-field-appearance-outline {

src/material-experimental/mdc-slide-toggle/slide-toggle.scss

@@ -1,7 +1,8 @@
+@use 'sass:math';
+@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 '../../cdk/a11y';
@@ -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: math.div(mdc-switch.$track-height, 2);
     }
   }
 }

src/material/badge/_badge-theme.scss

@@ -1,6 +1,7 @@
 // This contains all of the styles for the badge
 // rather than just the color/theme because of
 // no style sheet support for directives.
+@use 'sass:math';
 @use 'sass:color';
 @use 'sass:map';
 @use 'sass:meta';
@@ -25,13 +26,13 @@ $large-size: $default-size + 6;
 
   &.mat-badge-above {
     .mat-badge-content {
-      top: -$size / 2;
+      top: math.div(-$size, 2);
     }
   }
 
   &.mat-badge-below {
     .mat-badge-content {
-      bottom: -$size / 2;
+      bottom: math.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: math.div(-$size, 2);
       }
     }
 
     [dir='rtl'] &.mat-badge-before {
       .mat-badge-content {
         left: auto;
-        right: -$size / 2;
+        right: math.div(-$size, 2);
       }
     }
 
     &.mat-badge-after {
       .mat-badge-content {
-        right: -$size / 2;
+        right: math.div(-$size, 2);
       }
     }
 
     [dir='rtl'] &.mat-badge-after {
       .mat-badge-content {
         right: auto;
-        left: -$size / 2;
+        left: math.div(-$size, 2);
       }
     }
   }

src/material/card/card.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use '../core/style/variables';
 @use '../core/style/elevation';
 @use '../core/style/private';
@@ -59,8 +60,8 @@ $header-size: 40px !default;
 
 .mat-card-actions {
   @extend %mat-card-section-base;
-  margin-left: -$padding / 2;
-  margin-right: -$padding / 2;
+  margin-left: math.div(-$padding, 2);
+  margin-right: math.div(-$padding, 2);
   padding: 8px 0;
 }
 

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: math.div(2, 15) * checkbox-common.$size !default;
 
 
 // Fades in the background of the checkbox when it goes from unchecked -> {checked,indeterminate}.

src/material/core/option/option.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use '../style/menu-common';
 @use '../style/vendor-prefixes';
 @use '../style/layout-common';
@@ -77,7 +78,7 @@
 }
 
 .mat-option-pseudo-checkbox {
-  $margin: menu-common.$side-padding / 2;
+  $margin: math.div(menu-common.$side-padding, 2);
   margin-right: $margin;
 
   [dir='rtl'] & {

src/material/core/selection/pseudo-checkbox/pseudo-checkbox.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use '../../style/checkbox-common';
 @use '../../style/private';
 @use '../../style/variables';
@@ -50,19 +51,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: math.div(checkbox-common.$size - checkbox-common.$border-width, 2) -
+      checkbox-common.$border-width;
+  left: math.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: math.div(checkbox-common.$size, 2) - math.div($_checkmark-size, 4) -
+      math.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: math.div($_checkmark-size - checkbox-common.$border-width, 2);
   border-left: checkbox-common.$border-width solid currentColor;
   transform: rotate(-45deg);
   opacity: 1;

src/material/core/style/_menu-common.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @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: math.div($triangle-height, 2);
 
     width: 0;
     height: 0;

src/material/core/typography/_typography-utils.scss

@@ -1,3 +1,4 @@
+@use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
@@ -76,9 +77,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 list.slash($font-size, $line-height) $font-family;
   }
 }
 

src/material/datepicker/calendar-body.scss

@@ -1,11 +1,12 @@
+@use 'sass:math';
 @use '../../cdk/a11y';
 
 $calendar-body-label-padding-start: 5% !default;
 // We don't want the label to jump around when we switch between month and year views, so we use
 // 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: math.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;

src/material/datepicker/date-range-input.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use '../core/style/variables';
 @use '../core/style/vendor-prefixes';
 @use '../../cdk/a11y';
@@ -6,8 +7,8 @@ $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
+      math.div(variables.$swift-ease-out-duration, 3) variables.$swift-ease-out-timing-function;
 }
 
 // Host of the date range input.

src/material/form-field/_form-field-fill-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/typography/typography';
@@ -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: math.div(100%, $font-scale) + $fill-dedupe;
 
   $fill-dedupe: $fill-dedupe + 0.00001 !global;
 }

src/material/form-field/_form-field-legacy-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/style/form-common';
@@ -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: math.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: math.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: math.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% - #{math.div($wrapper-padding-bottom, $subscript-font-scale)});
     }
   }
 

src/material/form-field/_form-field-outline-theme.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use 'sass:map';
 @use '../core/theming/theming';
 @use '../core/typography/typography';
@@ -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: math.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: math.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.