From fd2899c732162cccded2f2375d2bdabe23ef9350 Mon Sep 17 00:00:00 2001 From: Sana Javed Date: Thu, 25 May 2023 15:01:23 +0200 Subject: [PATCH] Switching links to absolute paths, updating headsUp tags and compat tags --- source/documentation/at-rules/forward.liquid | 16 ++++---- source/documentation/at-rules/import.liquid | 19 +++++---- source/documentation/at-rules/index.liquid | 38 +++++++++--------- source/documentation/at-rules/use.liquid | 26 ++++++------ source/documentation/interpolation.liquid | 42 +++++++++----------- source/documentation/variables.liquid | 30 +++++++------- 6 files changed, 81 insertions(+), 90 deletions(-) diff --git a/source/documentation/at-rules/forward.liquid b/source/documentation/at-rules/forward.liquid index 87e6c53..432cd4e 100644 --- a/source/documentation/at-rules/forward.liquid +++ b/source/documentation/at-rules/forward.liquid @@ -1,7 +1,7 @@ --- title: "@forward" introduction: > - The `@forward` rule loads a Sass stylesheet and makes its [mixins](../mixin), [functions](../function), and [variables](../../variables) available when your stylesheet is loaded with the [`@use` rule](../use). It makes it possible to organize Sass libraries across many files, while allowing their users to load a single entrypoint file. + The `@forward` rule loads a Sass stylesheet and makes its [mixins](/documentation/at-rules/mixin), [functions](/documentation/at-rules/function), and [variables](/documentation/variables) available when your stylesheet is loaded with the [`@use` rule](/documentation/at-rules/use). It makes it possible to organize Sass libraries across many files, while allowing their users to load a single entrypoint file. --- {% markdown %} The rule is written `@forward ""`. It loads the module at the given URL @@ -11,19 +11,19 @@ module. Those members aren't available in your module, though—if you want that you'll need to write a `@use` rule as well. Don't worry, it'll only load the module once! -[public]: ../use#private-members +[public]: /documentation/at-rules/use#private-members If you *do* write both a `@forward` and a `@use` for the same module in the same file, it's always a good idea to write the `@forward` first. That way, if your users want to [configure the forwarded module][], that configuration will be applied to the `@forward` before your `@use` loads it without any configuration. -[configure the forwarded module]: ../use#configuration +[configure the forwarded module]: /documentation/at-rules/use#configuration {% funFact %} The `@forward` rule acts just like `@use` when it comes to a module's CSS. Styles from a forwarded module will be included in the compiled CSS output, and the module with the `@forward` can [extend][] it, even if it isn't also `@use`d. -[extend]: ../extend +[extend]: /documentation/at-rules/extend {% endfunFact %} {% endmarkdown %} @@ -74,7 +74,7 @@ Because module members are usually used with [a namespace][], short and simple n This is written `@forward "" as -*`, and it adds the given prefix to the beginning of every mixin, function, and variable name forwarded by the module. For example, if the module defines a member named `reset` and it's forwarded `as list-*`, downstream stylesheets will refer to it as `list-reset`. -[a namespace]: ../use#loading-members +[a namespace]: /documentation/at-rules/use#loading-members {% endmarkdown %} {% codeExample 'prefix' %} @@ -175,12 +175,12 @@ $horizontal-list-gap: 2em {% markdown %} ## Configuring Modules -{% # Arguments are (in order): `dart`, `libsass`, `ruby`, optional feature name, additional details within %} -{% compatibility '1.24.0', false, false %}{% endcompatibility %} +{% # Arguments are (in order): `dart`, `libsass`, `node`, `ruby`, optional feature name, additional details within %} +{% compatibility '1.24.0', false, null, false %}{% endcompatibility %} The `@forward` rule can also load a module with [configuration][]. This mostly works the same as it does for `@use`, with one addition: a `@forward` rule's configuration can use the `!default` flag in its configuration. This allows a module to change the defaults of an upstream stylesheet while still allowing downstream stylesheets to override them. -[configuration]: ../use#configuration +[configuration]: /documentation/at-rules/use#configuration {% endmarkdown %} {% codeExample 'configuration' %} diff --git a/source/documentation/at-rules/import.liquid b/source/documentation/at-rules/import.liquid index 747cbd8..5d77c0d 100644 --- a/source/documentation/at-rules/import.liquid +++ b/source/documentation/at-rules/import.liquid @@ -67,7 +67,6 @@ We've written a [migration tool][] that automatically converts most [migration tool]: /documentation/cli/migrator {% endheadsUp %} - {% endmarkdown %} {% codeExample 'import' %} @@ -159,11 +158,13 @@ Unlike some other languages, Sass doesn't require that you use `./` for relative As a convention, Sass files that are only meant to be imported, not compiled on their own, begin with `_` (as in `_code.scss`). These are called *partials*, and they tell Sass tools not to try to compile those files on their own. You can leave off the `_` when importing a partial. ### Index Files +{% endmarkdown %} -{% # Arguments are (in order): `dart`, `libsass`, `ruby`, optional feature name, additional details within %} -{% compatibility true, '3.6.0', '3.6.0' %}{% endcompatibility %} +{% # Arguments are (in order): `dart`, `libsass`, `node`, `ruby`, optional feature name, additional details within %} +{% compatibility true, '3.6.0', null, '3.6.0' %}{% endcompatibility %} + +{% markdown %} If you write an `_index.scss` or `_index.sass` in a folder, when the folderitself is imported that file will be loaded in its place. - {% endmarkdown %} {% codeExample 'index-files' %} @@ -289,7 +290,7 @@ Nested imports are very useful for scoping third-party stylesheets, but if you'r [mixin]: /documentation/at-rules/mixin {% endfunFact %} -{% headsUp %} +{% headsUp, false %} {% markdown %} The CSS in nested imports is evaluated like a mixin, which means that any [parent selectors][] will refer to the selector in which the stylesheet is nested. @@ -340,8 +341,7 @@ ul li {% markdown %} ## Importing CSS -{% # Arguments are (in order): `dart`, `libsass`, `ruby`, optional feature name, additional details within %} -{% compatibility '1.11.0', 'partial', false %} +{% compatibility '1.11.0', 'partial', null, false %} LibSass supports importing files with the extension `.css`, but contrary to the specification they're treated as SCSS files rather than being parsed as CSS. This behavior has been deprecated, and an update is in the works to @@ -390,8 +390,7 @@ rendered as-is. It can even be [extended][]! ## Plain CSS `@import`s -{% # Arguments are (in order): `dart`, `libsass`, `ruby`, optional feature name, additional details within %} -{% compatibility true, 'partial', true %} +{% compatibility true, 'partial', null, true %} By default, LibSass handles plain CSS imports correctly. However, any [custom importers][] will incorrectly apply to plain-CSS `@import` rules, making it possible for those rules to load Sass files. [custom importers]: /documentation/js-api/interfaces/LegacySharedOptions#importer @@ -508,7 +507,7 @@ To make this easier, Sass also supports *import-only files*. If you name a file {% markdown %} #### Configuring Modules Through Imports -{% compatibility '1.24.0', false, false %}{% endcompatibility %} +{% compatibility '1.24.0', false, null, false %}{% endcompatibility %} You can [configure modules][] that are loaded through an `@import` by defining global variables prior the `@import` that first loads that module. diff --git a/source/documentation/at-rules/index.liquid b/source/documentation/at-rules/index.liquid index 9b09c94..fc7fc0d 100644 --- a/source/documentation/at-rules/index.liquid +++ b/source/documentation/at-rules/index.liquid @@ -7,51 +7,51 @@ introduction: > --- {% markdown %} -* [`@use`](./use) loads mixins, functions, and variables from other Sass +* [`@use`](/documentation/at-rules/use) loads mixins, functions, and variables from other Sass stylesheets, and combines CSS from multiple stylesheets together. -* [`@forward`](./forward) loads a Sass stylesheet and makes its mixins, +* [`@forward`](/documentation/at-rules/forward) loads a Sass stylesheet and makes its mixins, functions, and variables available when your stylesheet is loaded with the `@use` rule. -* [`@import`](./import) extends the CSS at-rule to load styles, mixins, +* [`@import`](/documentation/at-rules/import) extends the CSS at-rule to load styles, mixins, functions, and variables from other stylesheets. -* [`@mixin` and `@include`](./mixin) makes it easy to re-use chunks of +* [`@mixin` and `@include`](/documentation/at-rules/mixin) makes it easy to re-use chunks of styles. -* [`@function`](./function) defines custom functions that can be used in +* [`@function`](/documentation/at-rules/function) defines custom functions that can be used in [SassScript expressions][]. -* [`@extend`](./extend) allows selectors to inherit styles from one +* [`@extend`](/documentation/at-rules/extend) allows selectors to inherit styles from one another. -* [`@at-root`](./at-root) puts styles within it at the root of the +* [`@at-root`](/documentation/at-rules/at-root) puts styles within it at the root of the CSS document. -* [`@error`](./error) causes compilation to fail with an error message. +* [`@error`](/documentation/at-rules/error) causes compilation to fail with an error message. -* [`@warn`](./warn) prints a warning without stopping compilation +* [`@warn`](/documentation/at-rules/warn) prints a warning without stopping compilation entirely. -* [`@debug`](./debug) prints a message for debugging purposes. +* [`@debug`](/documentation/at-rules/debug) prints a message for debugging purposes. * Flow control rules like [`@if`][], [`@each`][], [`@for`][], and [`@while`][] control whether or how many times styles are emitted. -[SassScript expressions]: ../syntax/structure#expressions -[`@if`]: ./control/if -[`@each`]: ./control/each -[`@for`]: ./control/for -[`@while`]: ./control/while +[SassScript expressions]: /documentation/syntax/structure#expressions +[`@if`]: /documentation/at-rules/control/if +[`@each`]: /documentation/at-rules/control/each +[`@for`]: /documentation/at-rules/control/for +[`@while`]: /documentation/at-rules/control/while Sass also has some special behavior for [plain CSS at-rules][]: they can contain [interpolation][], and they can be nested in style rules. Some of them, like [`@media`][] and [`@supports`][], also allow SassScript to be used directly in the rule itself without interpolation. -[plain CSS at-rules]: ./css -[interpolation]: ../interpolation -[`@media`]: ./css#media -[`@supports`]: ./css#supports +[plain CSS at-rules]: /documentation/at-rules/css +[interpolation]: /documentation/interpolation +[`@media`]: /documentation/at-rules/css#media +[`@supports`]: /documentation/at-rules/css#supports {% endmarkdown %} diff --git a/source/documentation/at-rules/use.liquid b/source/documentation/at-rules/use.liquid index 17b16c8..cf2099b 100644 --- a/source/documentation/at-rules/use.liquid +++ b/source/documentation/at-rules/use.liquid @@ -4,7 +4,7 @@ table_of_contents: true eleventyComputed: before_introduction: "{% render 'documentation/snippets/module-system-status' %}" introduction: > - The `@use` rule loads [mixins](../mixin), [functions](../function), and [variables](../../variables) from other Sass stylesheets, and combines CSS from multiple stylesheets together. Stylesheets loaded by `@use` are called "modules". Sass also provides [built-in modules](../../modules) full of useful functions. + The `@use` rule loads [mixins](/documentation/at-rules/mixin), [functions](/documentation/at-rules/function), and [variables](/documentation/variables) from other Sass stylesheets, and combines CSS from multiple stylesheets together. Stylesheets loaded by `@use` are called "modules". Sass also provides [built-in modules](/documentation/modules) full of useful functions. complementary_content: |