Use new sass features to better framework organizing (@use & @forward)

[Xaz16]

First of all thank you bootstrap team for delightful tool.

Links

Before I can propose something I think you should check such at-rules in SASS language:
https://sass-lang.com/documentation/at-rules/use
https://sass-lang.com/documentation/at-rules/forward
https://sass-lang.com/documentation/at-rules/import#import-and-modules

And the most important -- a deprecation of @import rule:
https://sass-lang.com/documentation/at-rules/import (first red box)

To reduce boring work to adding namespace to each variable/mixin/function:
https://sass-lang.com/documentation/cli/migrator

Proposal

The proposal is simple -- use new tools which sass languages provides to developer for better organisation of theirs modules and other stuff.

Why we need it

As live example I'm using bootstrap scss on my project and want to divide couple of files, one of them

// global.scss
@import '~bootstrap/scss/bootstrap-grid';
@import '~bootstrap/scss/bootstrap-reboot';
@import '~bootstrap/scss/utilities';

// component.scss
@import '~bootstrap/scss/bootstrap-grid';

@include media-breakpoint-up(sm) {
  color: red;
}

Current structure and "public api" leads to:

• Using of deprecation import rule which is not provide any obvious public api for mixins, variables, functions
• Name conflicts between my project and bootstrap itself. As example I want to create variable $spacer which already exists in scss/_variables.scss
• Duplication of css rules. I want to access only breakpoints mixins in compontent.scss but with it I get css rules which expect to be global for my app

Problems of current structure for project:

• We need to have a big file with list of all variables without name spacing. With new at-rules namespace created by default without any efforts. As well these rules provides "as" syntax which working similar to ES6 imports and provide tool to avoid name conflicts
• etc...

I will be glad to discuss this issue and sorry for duplication if it is, didn't find something similar...

[MartijnCuppens]

Duplicate of #29853. In short: we can't switch to the new Sass module system yet because the majority of build systems doesn't support @use or @foward yet.

One day we will probably switch though (probably in v6).