-
-
Save nex3/81c8a64f29771803916a to your computer and use it in GitHub Desktop.
| // Imports zip.sass, zip.scss, or zip.css *nontransitively* with a "zip" prefix. | |
| @use "zip"; | |
| // Uses the "foo" mixin from zip. | |
| @include zip-foo; | |
| // The prefix is now "zap". | |
| @use "zip" as zap; | |
| // Everything is in the global namespace. | |
| @use "zip" without prefix; | |
| // Mixins named "foo" are completely invisible. | |
| @use "zip" hide foo; | |
| // Selectors including ".bar" aren't included and aren't extendable. | |
| @use "zip" hide selector .bar; | |
| // No mixins are visible. | |
| @use "zip" hide all mixins; | |
| // Nothing other than mixins or functions named "foo" are visible. | |
| @use "zip" show foo; | |
| // Everything in "zip" is visible to importers of this file. | |
| // Supports all the same options as @use. | |
| @export "zip"; | |
| // If we want to make this work well with guarded assignment, we'll need something like this: | |
| @use "zip" with $var: value, | |
| $other-var: other-value; |
Just to clarify, as discussed (correct me if I'm mis-remembering @nex3), everything written in a file is available for @use. @export is explicitly for allowing modules brought in through @use to be visible to files bringing in that file. As an example:
/* _bar.scss */
// Brings in `zip`, namespaces all mixins and functions with `zip-`
@use 'zip';
// .foo will be available to whoever `@use`es this file
.foo {
// Namespaced mixin from zip
@include zip-foo;
}
// Without this line, files that include `@use` don't get `zip` as well. Exporting `zip` allows files with `@use 'bar'` to use `zip` as well
@export 'zip';
So @export is for marking a non-transitive import as transitive? Maybe that's not necessary?
I have to admit I have a hard time wrapping my head around the use cases for all these aspects of the feature. Hide/show and guarded assignment raise the most questions for me.
Now that I can digest the v2 wishlist, I'm going to give this some more thought and revise my gist.
I understand there is something nice and consistent about namespacing with foo-, but that actually concerns me a bit. I wish the prefixed namespace stood out more as something other, so there is an explicit difference between the mixin/variable name itself, and the namespace it is imported under.
I'm also curious about @include zip-foo; importing a single mixin. That sounds like crazy magic. What if I have a file called zip-foo.scss, which takes precedence?
This is directly related to the
@import v2 wishlist