♻️ Migrate Sass @import to @use syntax

[Copilot]

Dart Sass 3.0.0 will remove @import rules. Projects using sphinx-design's SCSS files see deprecation warnings when compiling with newer Sass versions.

Changes

• style/index.scss: Converted all @import statements to @use ... as *
• Inter-module dependencies: Added explicit @use imports to files consuming variables from other modules:
  • _display.scss → imports spacing for $media-widths
  • _button.scss → imports colors for $semantic-colors
  • _grids.scss → imports spacing for $spacings and $media-widths
  • _variables.scss → imports colors for $semantic-colors and color utilities

The as * syntax maintains backward compatibility by making all members available without namespace prefixes.

Before/After

// Before
@import './colors';
@import './spacing';

// After
@use './colors' as *;
@use './spacing' as *;

Compiled CSS output is byte-identical. No functional changes.

Original prompt

Issue

Fixes #231

Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0. See: https://sass-lang.com/documentation/breaking-changes/import/

When compiling projects that use sphinx-design's SCSS files with newer versions of Sass/Hugo, deprecation warnings are shown:

Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

Task

Migrate all Sass @import statements to use the @use syntax throughout the codebase.

The main file that needs updating is style/index.scss, which currently contains:

@import './colors';
@import './spacing';
@import './sizing';
@import './display';
@import './text';
@import './borders';
@import './animations';
@import './badge';
@import './button';
@import './icons';
@import './cards';
@import './grids';
@import './dropdown';
@import './tabs';
@import './overrides';
@import './variables'

These should be converted to @use syntax. As suggested in the issue, the syntax needed is:

@use "badge" as *;

Using as * makes all members available without a namespace prefix, which maintains backward compatibility with how @import worked.

Requirements

1. Replace all @import statements with @use ... as * syntax in style/index.scss
2. Check for any other SCSS files in the repository that may use @import and update them as well
3. Ensure the migration doesn't break any existing functionality
4. If any imported files define variables, mixins, or functions that are used elsewhere, ensure they remain accessible after the migration

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.