Sass @import vs @use for Global Variable Distribution

Namespace Control vs. Refactor Effort

A small web application currently utilizes the legacy @import system to distribute shared variables, mixins, and functions across multiple stylesheets. With Sass versions 1.45+ emitting deprecation warnings, there is a need to align the architecture with the modern module system to ensure long-term compatibility.

The primary constraint is maintaining a consistent global state for variables without introducing regressions in the final CSS output. While @import allows for implicit global access, the @use rule introduces namespacing, which prevents collisions but requires explicit referencing of members.

Using @forward can mitigate some namespacing overhead by creating a centralized entry point, but this necessitates a structural refactor of all existing partials.

• @import: Minimal immediate effort but risks CSS duplication and name collisions.
• @use/@forward: Improved maintainability and output efficiency but requires updating every variable reference across the project.

Which approach is more sustainable for a small-scale application where build stability is prioritized over strict architectural purity? Does the reduction in duplicated CSS output provided by @use outweigh the manual refactoring cost for a limited number of stylesheets?