Removing @import should be stopped

I agree that we need local vars. But at the same time, global var does bring benefit for certain reason. Moreover, @use does not have some good features like @import, which it supposed to have. For instance, nesting is a very important one that @use should have. But it doesn’t.

On the global, we need it to set global configuration (a fixed one). Please refer #2750

For now, I decide to use both for whatever convenient for me. But I sure hope that we didn’t remove @import and add nesting to @use. Or I will have a tons of extra lines in my code.

[jathak]

The main difference between @use and load-css is that @use allows access to a file’s variables, functions, and mixins, while load-css only includes a file’s generated CSS. One of the goals of the module system is to make it easy to find where a given variable, function, or mixin comes from. To ensure that, we require that @use is at the top-level of a file, before most other rules, and that it refers to a static URL.

Given most nested @imports only cared about the CSS that was imported (and not the variables, functions, or mixins), we still support this behavior via load-css. As a bonus, the URL for load-css doesn’t have to be a static string like @import.

You may find it helpful to refer to the “Goals” section of the module system spec to understand the reasoning behind these changes.

[mirisuzanne]

Nesting is still supported with the load-css() mixin - even improved because that mixin supports custom configuration and dynamic importing:

@use 'sass:meta';

@each $theme, $file in $themes {
  [data-theme="#{$theme}" {
    @include meta.load-css("themes/#{$file}",
      $with: ("base-color": $brand));
    }
  }
}