-
-
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; |
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?
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: