diff --git a/package.json b/package.json
index 84c5cdbe65f5..d9c28c41147d 100644
--- a/package.json
+++ b/package.json
@@ -160,7 +160,7 @@
     "requirejs": "^2.3.6",
     "rollup": "^2.66.1",
     "rollup-plugin-sourcemaps": "^0.6.3",
-    "sass": "^1.77.8",
+    "sass": "^1.80.6",
     "selenium-webdriver": "^3.6.0",
     "semver": "^7.3.5",
     "send": "^0.17.2",
diff --git a/src/material/core/m2/_theming.scss b/src/material/core/m2/_theming.scss
index 10f5bf50876e..9bdf01f26828 100644
--- a/src/material/core/m2/_theming.scss
+++ b/src/material/core/m2/_theming.scss
@@ -1,6 +1,7 @@
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
+@use 'sass:color';
 @use '../theming/theming';
 @use './palette';
 
@@ -82,7 +83,7 @@
     @return $color;
   }
 
-  @return rgba($color, if($opacity == null, opacity($color), $opacity));
+  @return rgba($color, if($opacity == null, color.opacity($color), $opacity));
 }
 
 // Validates the specified theme by ensuring that the optional color config defines
diff --git a/src/material/core/theming/_theming.scss b/src/material/core/theming/_theming.scss
index 89d391b3334e..eb6d3cb56148 100644
--- a/src/material/core/theming/_theming.scss
+++ b/src/material/core/theming/_theming.scss
@@ -2,6 +2,7 @@
 @use 'sass:map';
 @use 'sass:math';
 @use 'sass:meta';
+@use 'sass:color';
 
 // Whether to enable compatibility with legacy methods for accessing theme information.
 $theme-legacy-inspection-api-compatibility: true !default;
@@ -332,7 +333,7 @@ $private-internal-name: _mat-theming-internals-do-not-access;
   // We convert the rgba color into a solid one by taking the opacity from the rgba
   // value and using it to determine the percentage of the background to put
   // into foreground when mixing the colors together.
-  @return mix($background-color, rgba($color, 1), (1 - opacity($color)) * 100%);
+  @return color.mix($background-color, rgba($color, 1), (1 - color.opacity($color)) * 100%);
 }
 
 // Clamps the density scale to a number between the given min and max.
diff --git a/src/material/core/tokens/_m3-tokens.scss b/src/material/core/tokens/_m3-tokens.scss
index a016fef15c16..0cde0b8f5763 100644
--- a/src/material/core/tokens/_m3-tokens.scss
+++ b/src/material/core/tokens/_m3-tokens.scss
@@ -130,7 +130,7 @@ $_cached-token-slots: null;
 @function create-map($keys, $prefix) {
   $result: ();
   @each $key in $keys {
-    $result: map-merge($result, ($key: var(--#{$prefix}-#{$key})));
+    $result: map.merge($result, ($key: var(--#{$prefix}-#{$key})));
   }
   @return $result;
 }
@@ -191,8 +191,8 @@ $_cached-token-slots: null;
             'tertiary-fixed',
             'tertiary-fixed-dim'
     );
-    @return map-merge(create-map($keys, $prefix), (
-            shadow: map.get($mdc-sys-color, shadow)
+    @return map.merge(create-map($keys, $prefix), (
+      shadow: map.get($mdc-sys-color, shadow)
     ));
   }
 
diff --git a/src/material/core/tokens/m2/mat/_badge.scss b/src/material/core/tokens/m2/mat/_badge.scss
index 8e93f5750345..8ad24b1701d7 100644
--- a/src/material/core/tokens/m2/mat/_badge.scss
+++ b/src/material/core/tokens/m2/mat/_badge.scss
@@ -56,7 +56,7 @@ $prefix: (mat, badge);
   // the value to determine the percentage of the background to put into foreground when
   // mixing the colors together.
   @if (meta.type-of($disabled-background) == color and meta.type-of($app-background) == color) {
-    $badge-opacity: opacity($disabled-background);
+    $badge-opacity: color.opacity($disabled-background);
     $disabled-background: color.mix($app-background,
       rgba($disabled-background, 1), (1 - $badge-opacity) * 100%);
   }
diff --git a/src/material/core/tokens/m2/mat/_datepicker.scss b/src/material/core/tokens/m2/mat/_datepicker.scss
index 18231a105e99..c586fb125fbe 100644
--- a/src/material/core/tokens/m2/mat/_datepicker.scss
+++ b/src/material/core/tokens/m2/mat/_datepicker.scss
@@ -60,7 +60,7 @@ $private-default-overlap-color: #a8dab5;
   // for a solid border, but because we're using a dashed border for the
   // preview range, we need to bump its opacity to ensure that it's visible.
   @if meta.type-of($preview-outline-color) == color {
-    $preview-outline-opacity: math.min(opacity($preview-outline-color) * 2, 1);
+    $preview-outline-opacity: math.min(color.opacity($preview-outline-color) * 2, 1);
     $preview-outline-color: rgba($preview-outline-color, $preview-outline-opacity);
   }
 
diff --git a/src/material/core/tokens/m2/mat/_sort.scss b/src/material/core/tokens/m2/mat/_sort.scss
index f819669b3e58..2c2e6f98ca4b 100644
--- a/src/material/core/tokens/m2/mat/_sort.scss
+++ b/src/material/core/tokens/m2/mat/_sort.scss
@@ -26,7 +26,7 @@ $prefix: (mat, sort);
   // when mixing the colors together. Otherwise, if it resolves to something different
   // (e.g. it resolves to a CSS variable), we use the color directly.
   @if (meta.type-of($table-background) == color and meta.type-of($text-color) == color) {
-    $text-opacity: opacity($text-color);
+    $text-opacity: color.opacity($text-color);
     $arrow-color: color.mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%);
   }
   @else {
diff --git a/yarn.lock b/yarn.lock
index e233646c0ce5..288dbd5e840a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14471,14 +14471,16 @@ sass@1.80.5:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
-sass@^1.77.8:
-  version "1.77.8"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.8.tgz#9f18b449ea401759ef7ec1752a16373e296b52bd"
-  integrity sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==
+sass@^1.80.6:
+  version "1.80.6"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.80.6.tgz#5d0aa55763984effe41e40019c9571ab73e6851f"
+  integrity sha512-ccZgdHNiBF1NHBsWvacvT5rju3y1d/Eu+8Ex6c21nHp2lZGLBEtuwc415QfiI1PJa1TpCo3iXwwSRjRpn2Ckjg==
   dependencies:
-    chokidar ">=3.0.0 <4.0.0"
+    chokidar "^4.0.0"
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
+  optionalDependencies:
+    "@parcel/watcher" "^2.4.1"
 
 saucelabs@^1.5.0:
   version "1.5.0"