mirror of
https://github.com/danog/sass-site.git
synced 2024-11-26 20:14:53 +01:00
no need for quotes
This commit is contained in:
parent
aed800efdc
commit
de8ff74306
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: "Migrator"
|
||||
title: Migrator
|
||||
table_of_contents: true
|
||||
introduction: >
|
||||
The Sass migrator automatically updates your Sass files to help you move on to
|
||||
@ -104,14 +104,15 @@ Migrating _grid.scss
|
||||
```
|
||||
|
||||
{% headsUp %}
|
||||
The [module migrator][] assumes that any stylesheet that is depended on using
|
||||
a [`@use` rule][] or a [`@forward` rule][] has already been migrated to the
|
||||
module system, so it won't attempt to migrate them, even when the
|
||||
`--migrate-deps` option is passed.
|
||||
The [module migrator][] assumes that any stylesheet that is depended on using
|
||||
a [`@use` rule][] or a [`@forward` rule][] has already been migrated to the
|
||||
module system, so it won't attempt to migrate them, even when the
|
||||
`--migrate-deps` option is passed.
|
||||
|
||||
[module migrator]: #module
|
||||
[`@use` rule]: /documentation/at-rules/use
|
||||
[`@forward` rule]: /documentation/at-rules/forward
|
||||
|
||||
[module migrator]: #module
|
||||
[`@use` rule]: /documentation/at-rules/use
|
||||
[`@forward` rule]: /documentation/at-rules/forward
|
||||
{% endheadsUp %}
|
||||
|
||||
### `--load-path`
|
||||
@ -229,34 +230,35 @@ instead. It doesn't just naïvely change `@import`s to `@use`s—it updates
|
||||
stylesheets intelligently so that they keep working the same way they did
|
||||
before, including:
|
||||
|
||||
* Adding namespaces to uses of members (variables, mixins, and functions) from
|
||||
- Adding namespaces to uses of members (variables, mixins, and functions) from
|
||||
other modules.
|
||||
|
||||
* Adding new `@use` rules to stylesheets that were using members without
|
||||
- Adding new `@use` rules to stylesheets that were using members without
|
||||
importing them.
|
||||
|
||||
* Converting overridden default variables to [`with` clauses][].
|
||||
- Converting overridden default variables to [`with` clauses][].
|
||||
|
||||
[`with` clauses]: /documentation/at-rules/use#configuration
|
||||
|
||||
* Automatically removing `-` and `_` prefixes from members that are used from
|
||||
- Automatically removing `-` and `_` prefixes from members that are used from
|
||||
other files (because otherwise they'd be considered [private][] and could only
|
||||
be used in the module they're declared).
|
||||
|
||||
[private]: /documentation/at-rules/use#private-members
|
||||
|
||||
* Converting [nested imports][] to use the [`meta.load-css()` mixin][] instead.
|
||||
- Converting [nested imports][] to use the [`meta.load-css()` mixin][] instead.
|
||||
|
||||
[nested imports]: /documentation/at-rules/import#nesting
|
||||
[`meta.load-css()` mixin]: /documentation/modules/meta#load-css
|
||||
|
||||
{% headsUp %}
|
||||
Because the module migrator may need to modify both member definitions *and*
|
||||
member names, it's important to either run it with the [`--migrate-deps`
|
||||
option][] or ensure that you pass it all the stylesheets in your package or
|
||||
application.
|
||||
Because the module migrator may need to modify both member definitions _and_
|
||||
member names, it's important to either run it with the [`--migrate-deps`
|
||||
option][] or ensure that you pass it all the stylesheets in your package or
|
||||
application.
|
||||
|
||||
[`--migrate-deps` option]: #migrate-deps
|
||||
|
||||
[`--migrate-deps` option]: #migrate-deps
|
||||
{% endheadsUp %}
|
||||
|
||||
{% render 'code-snippets/example-module-migrator' %}
|
||||
@ -338,13 +340,13 @@ matches multiple prefixes, the longest matching prefix will be removed.
|
||||
This option tells the migrator which members to forward using the [`@forward`
|
||||
rule][]. It supports the following settings:
|
||||
|
||||
* `none` (the default) doesn't forward any members.
|
||||
- `none` (the default) doesn't forward any members.
|
||||
|
||||
* `all` forwards all members except those that started with `-` or `_` in the
|
||||
- `all` forwards all members except those that started with `-` or `_` in the
|
||||
original stylesheet, since that was commonly used to mark a package-private
|
||||
member before the module system was introduced.
|
||||
|
||||
* `prefixed` forwards only members that begin with the prefix passed to the
|
||||
- `prefixed` forwards only members that begin with the prefix passed to the
|
||||
[`--remove-prefix` option][]. This option may only be used in conjunction with
|
||||
the `--remove-prefix` option.
|
||||
|
||||
@ -397,9 +399,9 @@ However, you can also do this to accomplish more complicated renames. For
|
||||
instance, say that you previously had a stylesheet that looked like this:
|
||||
|
||||
```scss
|
||||
@import "components/button/lib/mixins";
|
||||
@import "components/input/lib/mixins";
|
||||
@import "components/table/lib/mixins";
|
||||
@import 'components/button/lib/mixins';
|
||||
@import 'components/input/lib/mixins';
|
||||
@import 'components/table/lib/mixins';
|
||||
// ...
|
||||
```
|
||||
|
||||
@ -407,9 +409,9 @@ Since all of these URLs would have the default namespace `mixins` when migrated
|
||||
to `@use` rules, the module migrator may end up generating something like this:
|
||||
|
||||
```scss
|
||||
@use "components/button/lib/mixins" as button-lib-mixins;
|
||||
@use "components/input/lib/mixins" as input-lib-mixins;
|
||||
@use "components/table/lib/mixins" as table-lib-mixins;
|
||||
@use 'components/button/lib/mixins' as button-lib-mixins;
|
||||
@use 'components/input/lib/mixins' as input-lib-mixins;
|
||||
@use 'components/table/lib/mixins' as table-lib-mixins;
|
||||
// ...
|
||||
```
|
||||
|
||||
@ -421,9 +423,9 @@ If we run the namespace migrator with
|
||||
`--rename 'url components/(\w+)/lib/mixins to \1'`, we'll end up with:
|
||||
|
||||
```scss
|
||||
@use "components/button/lib/mixins" as button;
|
||||
@use "components/input/lib/mixins" as input;
|
||||
@use "components/table/lib/mixins" as table;
|
||||
@use 'components/button/lib/mixins' as button;
|
||||
@use 'components/input/lib/mixins' as input;
|
||||
@use 'components/table/lib/mixins' as table;
|
||||
// ...
|
||||
```
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user