Add a section describing the differences between @use and @import (#636)

Closes #443
This commit is contained in:
Natalie Weizenbaum 2022-05-31 16:43:33 -07:00 committed by GitHub
parent d78a1f26af
commit 9e97f56f66
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -559,3 +559,26 @@ valid CSS will produce errors. Otherwise, the CSS will be rendered as-is. It can
even be [extended][]!
[extended]: extend
## Differences From `@import`
The `@use` rule is intended to replace the old [`@import` rule], but it's
intentionally designed to work differently. Here are some major differences
between the two:
* `@use` only makes variables, functions, and mixins available within the scope
of the current file. It never adds them to the global scope. This makes it
easy to figure out where each name your Sass file references comes from, and
means you can use shorter names without any risk of collision.
* `@use` only ever loads each file once. This ensures you don't end up
accidentally duplicating your dependencies' CSS many times over.
* `@use` must appear at the beginning your file, and cannot be nested in style
rules.
* Each `@use` rule can only have one URL.
* `@use` requires quotes around its URL, even when using the [indented syntax].
[indented syntax]: /documentation/syntax#the-indented-syntax