Fixing “Global built-in functions are deprecated” Error in Dart Sass

The Problem: Deprecated adjust-color() Function If you’re working with Angular, Sass (SCSS), or Dart Sass, you may encounter this warning (or error):

▲ [WARNING] Deprecation: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use `color.adjust` instead.

Example Error in SCSS:

background: adjust-color(#1976d2, $lightness: -10%); // ❌ Deprecated

Why is this happening?

• • Dart Sass 2.0.0+ is moving towards a modular system and deprecating global functions.

• • The old adjust-color() function is being replaced with color.adjust() (part of the new Sass module system).

• • If ignored, this may eventually break in future Dart Sass versions (3.0.0+).

---

How to Fix It (Step-by-Step Solution)

1. Replace adjust-color() with color.adjust()

The simplest fix is to update the function call to use the new module syntax.

Before (Deprecated)

.element {
  background: adjust-color(#1976d2, $lightness: -10%);
}

After (Fixed)

.element {
  background: color.adjust(#1976d2, $lightness: -10%);
}

2. Alternative: Use adjust() (CSS-like syntax)

If you prefer a shorter version, you can use adjust(), but it requires different syntax (no $ in parameters).

⚠️ Wrong (Causes Error)

background: adjust(#d32f2f, $lightness: -10%); // ❌ Error: "Plain CSS functions don't support keyword arguments"

✅ Correct (Positional Arguments)

background: adjust(#d32f2f lightness -10%); // ✅ Works (CSS Color Module Level 5 syntax)

---

Why Did This Change?

• • Old Sass (LibSass, Ruby Sass) used global functions like adjust-color(), lighten(), darken().

• • New Dart Sass (2.0.0+) uses modules (color.adjust(), list.append(), etc.) for better organization.

• • Future-proofing: The old functions will be removed in Dart Sass 3.0.0.

---

Additional Fixes for Common Cases

1. Adjusting Lightness

// Old (Deprecated)
background: darken(#4CAF50, 10%); 

// New (Recommended)
background: color.adjust(#4CAF50, $lightness: -10%);

2. Adjusting Opacity

// Old (Deprecated)
background: transparentize(#1976d2, 0.2);

// New (Recommended)
background: color.adjust(#1976d2, $alpha: -0.2);

---

Final Notes

✅ Best Practice: Use color.adjust() for clarity and future compatibility. ❌ Avoid: adjust-color(), lighten(), darken() (deprecated). ⚠️ If Using adjust(): Stick to CSS-spec syntax (adjust(#color lightness -10%)).

Automated Migration Tool

Sass provides a migration tool to update your code automatically: 🔗 https://sass-lang.com/d/import

---

Summary of Fixes

Old (Deprecated)	New (Recommended)
adjust-color()	color.adjust()
lighten()	color.adjust($lightness: +X%)
darken()	color.adjust($lightness: -X%)
transparentize()	color.adjust($alpha: -X)

This should resolve the warnings and ensure compatibility with future Dart Sass versions. 🚀