Skip to content

Migrate all @import at-rules to @use in Sass #123

@tannerdolby

Description

@tannerdolby

Describe the new a11y feature or project enhancement

While contributing to this project, I noticed that there are quite a few @import rules being used for importing stylesheets, mixins, vars etc. Since there is awhile before the Sass team deprecates @import in dart-sass for good, this isn't super high priority but it is a good idea to begin the migration from @import to @use sooner than later.

I performed the migration from @import to @use for mdn/mdn-minimalist in this PR (for reference on what would potentially happen during the migration here).

Describe the solution you'd like

Convert all @import rules to a @use rule and more specifically add a index file into each directory of partials/mixins/etc and then use a single @use "some-dir" as * (without a namespace) rule to load in the entire directory in the main Sass file which gets compiled. Loading using @use and index files (with @forward in the index files) allows us to load all of a directories content (partials, vars, mixins, functions etc) with a single @use rule which is super nice.

Once I can start making some changes on a feature branch the overall structure will hopefully be a bit more clear as I didn't include any code examples here.

Link(s)

https://sass-lang.com/documentation/at-rules/use
https://tannerdolby.com/writing/using-index-files-in-sass/

Metadata

Metadata

Assignees

Labels

project enhancementEnhancement to improving the overall project

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions