What's the difference between only @use and @use as * SCSS rules?

Question

What's the difference?

@use 'scss/my'

and

@use 'scss/my' as *

I think it's same, isn't no use namespace, right? but is it difference?

Corrigendum

Answer 1

The Choosing a Namespace doc explains clearly.

By default, a module’s namespace is just the last component of its URL without a file extension. However, sometimes you might want to choose a different namespace—you might want to use a shorter name for a module you refer to a lot, or you might be loading multiple modules with the same filename. You can do this by writing @use "<url>" as <namespace>.

You can even load a module without a namespace by writing @use "<url>" as *. We recommend you only do this for stylesheets written by you, though; otherwise, they may introduce new members that cause name conflicts!

Almire

Answer 2

In Simple terms both syntax are used for different use cases, as of now when we use @use then everything contained in that particular file becomes namespaced by default i.e you have to prefix namespace name which you have used and if you don't mention any namespace then by default it will be the file name as shown in below images(Note: the .css is the output generated for .scss file).

Implicit/Default Behaviour

Under the Hood (what actually it mean when we don't mention any namespace name)

Any other namespace name

No Namespace (Not Recommended!!)

Additional Info

Let's think about why namespace is important?

Primarly it help to avoid bugs/conflicts and help us to divide all the .scss file efficiently.

Lets consider a case we have more than 1 partial files having same variable name which we are using without using namespace

Fix for above issue to either set the namespace for any 1 file or both. Generally most of the projects contains several partial files to segregate styles in a project to make it more scalable in future. Below shown directory structure is how i have divided the whole styles(Only Global Style) for particular client's project, If we try to avoid namespace it may cause some unexpected result. Thanks

Pintsize

I wonder if there's been a change how the default namespace behaves. According to your answer (and as I expected), omitting the as beep would pick the default namespace. It doesn't for me: it fails with "Undefined variable.". Also, specifying an undeclared namespace works differently than you write for me: "There is no module with the namespace "p".". Strange, indeed, but I have to specify the namespace one way or another to make my variables work... – Peppery