diff --git a/Gemfile b/Gemfile
index 749153c52..eeb8f52b6 100644
--- a/Gemfile
+++ b/Gemfile
@@ -47,7 +47,7 @@ gem "redcarpet", "~> 3.6.0"
 gem "responders", "~> 3.1.1"
 gem "rinku", "~> 2.0.6", require: "rails_rinku"
 gem "ros-apartment", "~> 2.11.0", require: "apartment" # Remove ConnectionHandling monkey patch when upgrading
-gem "sassc-embedded", "~> 1.70.1"
+gem "sassc-embedded", "~> 1.80.1"
 gem "sassc-rails", "~> 2.1.2"
 gem "savon", "~> 2.15.1"
 gem "sitemap_generator", "~> 6.3.0"
diff --git a/Gemfile.lock b/Gemfile.lock
index 20f858894..2a70d51bc 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -249,7 +249,7 @@ GEM
       request_store (~> 1.0)
     globalize-accessors (0.3.0)
       globalize (>= 5.0.0)
-    google-protobuf (4.27.5)
+    google-protobuf (4.28.3)
       bigdecimal
       rake (>= 13)
     graphiql-rails (1.8.0)
@@ -583,13 +583,13 @@ GEM
       capistrano (~> 3.0)
       sshkit (>= 1.2)
     safely_block (0.4.1)
-    sass-embedded (1.72.0)
-      google-protobuf (>= 3.25, < 5.0)
-      rake (>= 13.0.0)
+    sass-embedded (1.80.4)
+      google-protobuf (~> 4.28)
+      rake (>= 13)
     sassc (2.4.0)
       ffi (~> 1.9)
-    sassc-embedded (1.70.1)
-      sass-embedded (~> 1.70)
+    sassc-embedded (1.80.1)
+      sass-embedded (~> 1.80)
     sassc-rails (2.1.2)
       railties (>= 4.0.0)
       sassc (>= 2.0)
@@ -781,7 +781,7 @@ DEPENDENCIES
   rubocop-rspec (~> 3.1.0)
   rubocop-rspec_rails (~> 2.30.0)
   rvm1-capistrano3 (~> 1.4.0)
-  sassc-embedded (~> 1.70.1)
+  sassc-embedded (~> 1.80.1)
   sassc-rails (~> 2.1.2)
   savon (~> 2.15.1)
   selenium-webdriver (~> 4.25.0)
diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss
index b413cca08..3bbb2dd03 100644
--- a/app/assets/stylesheets/_consul_settings.scss
+++ b/app/assets/stylesheets/_consul_settings.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 //  CONSUL DEMOCRACY Settings
 //  -----------------------------
 //
@@ -63,7 +65,7 @@ $tiny-font-size:      rem-calc(12) !default;
 $font-family-serif: Georgia, "Times New Roman", Times, serif !default;
 
 $brand:             #004a83 !default;
-$brand-secondary:   darken($brand, 10%) !default;
+$brand-secondary:   color.adjust($brand, $lightness: -10%) !default;
 
 $text-medium:       #515151 !default;
 $text-light:        #bfbfbf !default;
@@ -154,7 +156,7 @@ $sdg-colors: (
 // ---------------------------------------------------------------
 
 $anchor-color: $brand !default;
-$anchor-color-hover: darken($anchor-color, 20%) !default;
+$anchor-color-hover: color.adjust($anchor-color, $lightness: -20%) !default;
 
 $tab-background-active: $white !default;
 
diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss
index afaef8113..c25355249 100644
--- a/app/assets/stylesheets/_settings.scss
+++ b/app/assets/stylesheets/_settings.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 //  Foundation for Sites Settings
 //  -----------------------------
 //
@@ -773,15 +775,15 @@ $table-color-scale: 5% !default;
 $table-border: 1px solid smart-scale($table-background, $table-color-scale) !default;
 $table-padding: rem-calc(8 10 10) !default;
 $table-hover-scale: 2% !default;
-$table-row-hover: darken($table-background, $table-hover-scale) !default;
-$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default;
+$table-row-hover: color.adjust($table-background, $lightness: -1 * $table-hover-scale) !default;
+$table-row-stripe-hover: color.adjust($table-background, $lightness: -1 * ($table-color-scale + $table-hover-scale)) !default;
 $table-is-striped: true !default;
 $table-striped-background: smart-scale($table-background, $table-color-scale) !default;
 $table-stripe: even !default;
 $table-head-background: smart-scale($table-background, $table-color-scale * 0.5) !default;
-$table-head-row-hover: darken($table-head-background, $table-hover-scale) !default;
+$table-head-row-hover: color.adjust($table-head-background, $lightness: -1 * $table-hover-scale) !default;
 $table-foot-background: smart-scale($table-background, $table-color-scale) !default;
-$table-foot-row-hover: darken($table-foot-background, $table-hover-scale) !default;
+$table-foot-row-hover: color.adjust($table-foot-background, $lightness: -1 * $table-hover-scale) !default;
 $table-head-font-color: $body-font-color !default;
 $table-foot-font-color: $body-font-color !default;
 $show-header-for-stacked: false !default;
diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 00df63dec..441cf51bc 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Table of Contents
 //
 // 01. Global styles
@@ -131,7 +133,7 @@ $table-header:   #ecf1f6;
       border: $table-border;
 
       &:hover {
-        background: adjust-color(darken($table-background, 2%), $red: -4, $green: -1);
+        background: color.adjust(color.adjust($table-background, $lightness: -2%), $red: -4, $green: -1);
       }
     }
 
@@ -356,7 +358,7 @@ code {
   &:active,
   &:focus {
     border-bottom-color: transparent;
-    color: darken($delete, 10%);
+    color: color.adjust($delete, $lightness: -10%);
   }
 }
 
diff --git a/app/assets/stylesheets/admin/locales/form.scss b/app/assets/stylesheets/admin/locales/form.scss
index c834ee28b..e203596fb 100644
--- a/app/assets/stylesheets/admin/locales/form.scss
+++ b/app/assets/stylesheets/admin/locales/form.scss
@@ -13,7 +13,7 @@
 
   > select + fieldset,
   > fieldset + fieldset {
-    margin-top: $line-height / 2;
+    margin-top: calc($line-height / 2);
   }
 
   > [type="hidden"] + fieldset,
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index e217246ce..87a2f08ec 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Table of Contents
 //
 // 01. Global styles
@@ -1238,7 +1240,7 @@ table {
     }
 
     &:nth-child(even) {
-      background: adjust-color($table-background, $red: -3, $green: -1, $blue: -2);
+      background: color.adjust($table-background, $red: -3, $green: -1, $blue: -2);
     }
   }
 
diff --git a/app/assets/stylesheets/mixins/icons.scss b/app/assets/stylesheets/mixins/icons.scss
index e6a81cea8..9040457ba 100644
--- a/app/assets/stylesheets/mixins/icons.scss
+++ b/app/assets/stylesheets/mixins/icons.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 %font-icon {
   @extend %fa-icon;
   font-family: "Font Awesome 5 Free";
@@ -1539,7 +1541,7 @@ $font-awesome-icons: (
   .destroy-officer-link,
   .reject-link,
   .confirm-hide-link {
-    color: darken($alert-color, 5%);
+    color: color.adjust($alert-color, $lightness: -5%);
   }
 
   .show-link,
@@ -1571,7 +1573,7 @@ $font-awesome-icons: (
 
   .restore-link,
   .investments-link {
-    color: darken($warning-color, 20%);
+    color: color.adjust($warning-color, $lightness: -20%);
 
     &:not(:hover, :focus)::before {
       color: $warning-color;
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 2952d7ca2..407b94077 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Table of Contents
 //
 // 01. Votes and supports
@@ -19,8 +21,8 @@
   position: relative;
 
   .progress {
-    background: lighten($proposals, 35%);
-    border: 1px solid lighten($proposals, 35%);
+    background: color.adjust($proposals, $lightness: 35%);
+    border: 1px solid color.adjust($proposals, $lightness: 35%);
     height: rem-calc(14);
     position: relative;
 
@@ -59,7 +61,7 @@
 
     &:hover,
     &:active {
-      background: lighten($proposals, 25%);
+      background: color.adjust($proposals, $lightness: 25%);
       cursor: pointer;
     }
   }
@@ -899,7 +901,7 @@
 
   a,
   .info {
-    color: lighten($body-font-color, 15%);
+    color: color.adjust($body-font-color, $lightness: 15%);
     font-size: $small-font-size;
   }
 }
diff --git a/app/assets/stylesheets/sdg/tag_list.scss b/app/assets/stylesheets/sdg/tag_list.scss
index 52a613382..3ac6e7af4 100644
--- a/app/assets/stylesheets/sdg/tag_list.scss
+++ b/app/assets/stylesheets/sdg/tag_list.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .sdg-tag-list {
 
   .sdg-goal-tag-list {
@@ -21,7 +23,7 @@
         background-color: $color;
 
         &:hover {
-          background-color: darken($color, 10%);
+          background-color: color.adjust($color, $lightness: -10%);
         }
       }
 
diff --git a/app/assets/stylesheets/shared/map_location.scss b/app/assets/stylesheets/shared/map_location.scss
index 6c81aa187..c52154298 100644
--- a/app/assets/stylesheets/shared/map_location.scss
+++ b/app/assets/stylesheets/shared/map_location.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .map-location-remove-marker {
   border-bottom: 1px dotted;
   border-radius: 0;
@@ -10,7 +12,7 @@
   &:active,
   &:focus {
     border-bottom-style: solid;
-    color: darken($delete, 10%);
+    color: color.adjust($delete, $lightness: -10%);
   }
 }
 
diff --git a/config/initializers/sass.rb b/config/initializers/sass.rb
index 7ab724bf5..ff9946cdc 100644
--- a/config/initializers/sass.rb
+++ b/config/initializers/sass.rb
@@ -1,8 +1,10 @@
-# TODO: remove once we upgrade Foundation and Font Awesome
+# TODO: Remove quiet_deps once we upgrade Foundation and Font Awesome,
+# and remove silence_deprecations once we migrate away from Sass @import rules,
+# which will be removed in Dart Sass 3.0.0.
 SassC::Engine.class_eval do
   alias_method :original_initialize, :initialize
 
   def initialize(template, options = {})
-    original_initialize(template, options.merge(quiet_deps: true))
+    original_initialize(template, options.merge(quiet_deps: true, silence_deprecations: [:import]))
   end
 end