Skip to content

Instantly share code, notes, and snippets.

@nex3

nex3/use.scss

Created October 4, 2014 21:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nex3/81c8a64f29771803916a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nex3/81c8a64f29771803916a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
use.scss
// 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;
@Snugug
Copy link

Snugug commented Oct 7, 2014

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';

@michaek
Copy link

michaek commented Oct 7, 2014

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.

@mirisuzanne
Copy link

mirisuzanne commented Oct 15, 2014

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment