fix(multiple): resolve sass if function deprecation warnings (#32674)

[Sass has deprecated the `if` function](https://sass-lang.com/documentation/breaking-changes/if-function) in order to support the native CSS `if()`. These changes update all of our usages so users don't get deprecation warnings.

Note that I decided to replace it with `@if`/`@else`, instead of the new syntax, because the new syntax is:
1. Harder to follow, in my opinion.
2. Likely going to break users that aren't on the absolute latest version of Sass.

(cherry picked from commit f3357c1)

Author: crisbeto

.stylelintrc.json

@@ -71,6 +71,7 @@
     "function-url-quotes": "always",
     "function-url-scheme-disallowed-list": ["data"],
     "function-whitespace-after": "always",
+    "function-disallowed-list": ["if"],
 
     "number-leading-zero": "always",
     "number-no-trailing-zeros": true,

package.json

@@ -132,7 +132,7 @@
     "rollup": "^4.52.3",
     "rollup-plugin-dts": "6.3.0",
     "rollup-plugin-sourcemaps2": "0.5.4",
-    "sass": "^1.80.6",
+    "sass": "^1.97.2",
     "selenium-webdriver": "^3.6.0",
     "semver": "^7.3.5",
     "shelljs": "^0.10.0",

pnpm-lock.yaml

@@ -54,7 +54,13 @@
            'Allowed values are "active" and "none"';
   }
 
-  @media (forced-colors: #{if($target == none, none, active)}) {
+  $query-value: active;
+
+  @if ($target == none) {
+    $query-value: none;
+  }
+
+  @media (forced-colors: #{$query-value}) {
     @content;
   }
 }

src/cdk/a11y/_index.scss

@@ -3,8 +3,16 @@
 // well. We reset some properties here to prevent these container elements from introducing
 // additional space that would throw off the scrolling calculations.
 @mixin _clear-container-space($direction) {
-  $start: if($direction == horizontal, 'left', 'top');
-  $end: if($direction == horizontal, 'right', 'bottom');
+  $start: '';
+  $end: '';
+
+  @if ($direction == horizontal) {
+    $start: 'left';
+    $end: 'right';
+  } @else {
+    $start: 'top';
+    $end: 'bottom';
+  }
 
   & > dl:not([cdkVirtualFor]),
   & > ol:not([cdkVirtualFor]),

src/cdk/scrolling/virtual-scroll-viewport.scss

@@ -10,7 +10,12 @@ $large-size: $default-size + 6;
 $fallbacks: m3-badge.get-tokens();
 
 @mixin _badge-size($size) {
-  $prefix: if($size == 'medium', '', $size + '-size-');
+  $prefix: '';
+
+  @if ($size != 'medium') {
+    $prefix: $size + '-size-';
+  }
+
   $legacy-size-var-name: 'badge-legacy-#{$prefix}container-size';
   $size-var-name: 'badge-#{$prefix}container-size';
 

src/material/badge/badge.scss

@@ -16,8 +16,12 @@
     -2: 28px,
     -3: 24px,
   ), $scale);
-  $touch-target-display: if($scale < -1, none, block);
   $touch-target-size: 48px;
+  $touch-target-display: block;
+
+  @if ($scale < -1) {
+    $touch-target-display: none;
+  }
 
   @return (
     base: (

src/material/button/_m2-button.scss

@@ -17,6 +17,11 @@
   $disabled-container : m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
   $density-scale: theming.clamp-density(map.get($system, density-scale), -3);
   $touch-target-size: 48px;
+  $touch-target-display: block;
+
+  @if ($density-scale < -1) {
+    $touch-target-display: none;
+  }
 
   @return (
     base: (
@@ -70,8 +75,8 @@
       fab-extended-label-text-weight: map.get($system, label-small-weight)
     ),
     density: (
-      fab-small-touch-target-display: if($density-scale < -1, none, block),
-      fab-touch-target-display: if($density-scale < -1, none, block),
+      fab-small-touch-target-display: $touch-target-display,
+      fab-touch-target-display: $touch-target-display,
     ),
   );
 }

src/material/button/_m2-fab.scss

@@ -6,6 +6,11 @@
 @function get-tokens($theme) {
   $system: m2-utils.get-system($theme);
   $density-scale: theming.clamp-density(map.get($system, density-scale), -3);
+  $touch-target-display: block;
+
+  @if ($density-scale < -1) {
+    $touch-target-display: none;
+  }
 
   @return (
     base: (
@@ -27,7 +32,7 @@
     ),
     typography: (),
     density: (
-      icon-button-touch-target-display: if($density-scale < -1, none, block),
+      icon-button-touch-target-display: $touch-target-display,
       icon-button-state-layer-size: map.get((
         0: 48px,
         -1: 44px,

src/material/button/_m2-icon-button.scss

@@ -6,6 +6,11 @@
 @function get-tokens($theme) {
   $system: m2-utils.get-system($theme);
   $density-scale: theming.clamp-density(map.get($system, density-scale), -3);
+  $touch-target-display: block;
+
+  @if ($density-scale < -1) {
+    $touch-target-display: none;
+  }
 
   @return (
     base: (
@@ -28,7 +33,7 @@
       checkbox-label-text-weight: map.get($system, body-medium-weight)
     ),
     density: (
-      checkbox-touch-target-display: if($density-scale < -1, none, block),
+      checkbox-touch-target-display: $touch-target-display,
       checkbox-state-layer-size: map.get((
         0: 40px,
         -1: 36px,