diff --git a/package.json b/package.json
index 6a6e57e3d23b..9ade77083219 100644
--- a/package.json
+++ b/package.json
@@ -132,7 +132,7 @@
     "rollup": "^4.52.3",
     "rollup-plugin-dts": "6.4.1",
     "rollup-plugin-sourcemaps2": "0.5.6",
-    "sass": "^1.97.2",
+    "sass": "^1.99.0",
     "selenium-webdriver": "^3.6.0",
     "semver": "^7.3.5",
     "shelljs": "^0.10.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9a519b69a62a..e03c6f21caa2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -294,8 +294,8 @@ importers:
         specifier: 0.5.6
         version: 0.5.6(@types/node@22.19.15)(rollup@4.60.1)
       sass:
-        specifier: ^1.97.2
-        version: 1.98.0
+        specifier: ^1.99.0
+        version: 1.99.0
       selenium-webdriver:
         specifier: ^3.6.0
         version: 3.6.0
@@ -8565,6 +8565,11 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  sass@1.99.0:
+    resolution: {integrity: sha512-kgW13M54DUB7IsIRM5LvJkNlpH+WhMpooUcaWGFARkF1Tc82v9mIWkCbCYf+MBvpIUBSeSOTilpZjEPr2VYE6Q==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
   saucelabs@1.5.0:
     resolution: {integrity: sha512-jlX3FGdWvYf4Q3LFfFWS1QvPg3IGCGWxIc8QBFdPTbpTJnt/v17FHXYVAn7C8sHf1yUXo2c7yIM0isDryfYtHQ==}
 
@@ -19116,6 +19121,14 @@ snapshots:
     optionalDependencies:
       '@parcel/watcher': 2.5.6
 
+  sass@1.99.0:
+    dependencies:
+      chokidar: 4.0.3
+      immutable: 5.1.5
+      source-map-js: 1.2.1
+    optionalDependencies:
+      '@parcel/watcher': 2.5.6
+
   saucelabs@1.5.0:
     dependencies:
       https-proxy-agent: 2.2.4
diff --git a/src/material/core/tokens/_system.scss b/src/material/core/tokens/_system.scss
index 7cc7cd463dc4..35b447514763 100644
--- a/src/material/core/tokens/_system.scss
+++ b/src/material/core/tokens/_system.scss
@@ -152,7 +152,7 @@
       $density-tokens: get-density-tokens($scale);
       @each $tokens in $density-tokens {
         @each $token-name, $token-value in $tokens {
-          --mat-#{$token-name}: #{$token-value};
+          @include _output-token('mat', $token-name, $token-value);
         }
       }
     }
@@ -204,7 +204,7 @@
   @include sass-utils.current-selector-or-root {
     @each $name, $value in $overrides {
       @if (map.has-key($sys-names, $name)) {
-        --#{$prefix}-#{$name}: #{map.get($overrides, $name)};
+        @include _output-token($prefix, $name, map.get($overrides, $name));
       }
     }
   }
@@ -229,7 +229,7 @@
 
   @include sass-utils.current-selector-or-root {
     @each $name, $value in $sys-colors {
-      --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+      @include _output-token($prefix, $name, map.get($overrides, $name) or $value);
     }
   }
 }
@@ -268,7 +268,7 @@
 
   @include sass-utils.current-selector-or-root {
     @each $name, $value in m3.md-sys-typescale-values($font-definition) {
-      --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+      @include _output-token($prefix, $name, map.get($overrides, $name) or $value);
     }
   }
 }
@@ -281,7 +281,7 @@
     @each $name, $value in m3.md-sys-elevation-values() {
       $level: map.get($overrides, $name) or $value;
       $value: elevation.get-box-shadow($level, $shadow-color);
-      --#{$prefix}-#{$name}: #{$value};
+      @include _output-token($prefix, $name, $value);
     }
   }
 }
@@ -289,7 +289,7 @@
 @mixin system-level-shape($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
   @include sass-utils.current-selector-or-root {
     @each $name, $value in m3.md-sys-shape-values() {
-      --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+      @include _output-token($prefix, $name, map.get($overrides, $name) or $value);
     }
   }
 }
@@ -297,7 +297,7 @@
 @mixin system-level-state($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
   @include sass-utils.current-selector-or-root {
     @each $name, $value in m3.md-sys-state-values() {
-      --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+      @include _output-token($prefix, $name, map.get($overrides, $name) or $value);
     }
   }
 }
@@ -389,10 +389,16 @@
   }
 }
 
+@mixin _output-token($prefix, $name, $value) {
+  // The strings silence some Sass compiler warnings.
+  --#{'' + $prefix}-#{'' + $name}: #{$value};
+}
+
 @mixin _define-m2-system-vars($vars, $overrides) {
   @include sass-utils.current-selector-or-root {
     @each $name, $value in $vars {
-      --#{definition.$system-fallback-prefix}-#{$name}: #{map.get($overrides, $name) or $value};
+      @include _output-token(
+        definition.$system-fallback-prefix, $name, map.get($overrides, $name) or $value);
     }
   }
 }