Convert to md

This commit is contained in:
Ed Rivas 2023-05-25 22:01:04 +00:00
parent 619bfd24b1
commit 7988595f56
10 changed files with 5 additions and 46 deletions

View File

@ -6,7 +6,6 @@ introduction: >
except where they're useful for nesting.
---
{% markdown %}
Sass has historically supported three invalid uses of combinators:
* Leading combinators, as in `+ .error {color: red}`.
@ -26,7 +25,6 @@ for these uses.
**There is one major exception**: leading and trailing combinators may still be
used for nesting purposes. For example, the following is still very much
supported:
{% endmarkdown %}
{% codeExample 1 %}
.sidebar > {
@ -40,7 +38,6 @@ supported:
color: red
{% endcodeExample %}
{% markdown %}
Sass will only produce an error if a selector still has a leading or trailing
combinator _after nesting is resolved_. Repeated combinators, on the other hand,
will always be errors.
@ -57,11 +54,10 @@ First, we'll emit deprecation warnings for all double combinators, as well as
leading or trailing combinators that end up in selectors after nesting is
resolved.
{% include 'documentation/snippets/silence-deprecations' %}
{% render 'documentation/snippets/silence-deprecations' %}
In addition, we'll immediately start omitting selectors that we know to be
invalid CSS from the compiled CSS, with one exception: we _won't_ omit selectors
that begin with a leading combinator, since they may be used from a nested
`@import` rule or `meta.load-css()` mixin. However, we don't encourage this
pattern and will drop support for it in Dart Sass 2.0.0.
{% endmarkdown %}

View File

@ -7,7 +7,6 @@ introduction: >
wasn't compatible with CSS.
---
{% markdown %}
{% compatibility true, '3.5.0', null, '3.5.0' %}{% endcompatibility %}
The CSS spec allows almost any string of characters to be used in a custom
@ -17,7 +16,6 @@ SassScript values, syntax that would have been valid plain CSS failed to parse.
For example, the [Polymer library][] used this to support plain-CSS mixins:
[Polymer library]: https://polymer-library.polymer-project.org/3.0/docs/devguide/custom-css-properties#use-custom-css-mixins
{% endmarkdown %}
{% codeExample 1, true, 'scss' %}
:root {
@ -39,12 +37,10 @@ For example, the [Polymer library][] used this to support plain-CSS mixins:
}
{% endcodeExample %}
{% markdown %}
To provide maximum compatibility with plain CSS, more recent versions of Sass
require SassScript expressions in custom property values to be written within
[interpolation](/documentation/interpolation). Interpolation will also work for older Sass
versions, and so is recommended for all stylesheets.
{% endmarkdown %}
{% codeExample 2 %}
$accent-color: #fbbc04;

View File

@ -1,12 +1,11 @@
---
title: "Breaking Change: Duplicate Variable Flags"
title: 'Breaking Change: Duplicate Variable Flags'
introduction: >
Variables will only allow a single `!global` or `!default` flag. Duplicate
flags never had any additional effect, this just ensures that stylesheets are
more consistent.
---
{% markdown %}
## Phase 1
{% compatibility '2.0.0', false, null, false %}{% endcompatibility %}
@ -22,4 +21,3 @@ each `!global` or `!default` flag, this will be a syntax error. This means that
Until Dart Sass 2.0.0 is released, multiple copies of a flag just produce
deprecation warnings.
{% endmarkdown %}

View File

@ -6,7 +6,6 @@ introduction: >
way `@extend` is meant to work.
---
{% markdown %}
{% compatibility true, false, null, false %}{% endcompatibility %}
When one selector extends another, Sass styles all elements that match the
@ -19,7 +18,6 @@ work like replacing `class="heads-up"` with `class="heads-up info message"`. But
that's not how it works right now in LibSass and Ruby Sass--instead of adding
`.heads-up` to every selector that has *either `.info` or `.message`*, it only
adds it to selectors that have *`.info.message` together*.
{% endmarkdown %}
{% codeExample 1, false %}
// These should both be extended, but they won't be.
@ -46,12 +44,10 @@ adds it to selectors that have *`.info.message` together*.
@extend .message.info
{% endcodeExample %}
{% markdown %}
To fix this issue, avoid more confusion, and keep the implementation clean and
efficient the ability to extend compound selectors is unsupported in Dart Sass
and will be removed in a future version of LibSass. For compatibility, users
should extend each simple selector separately instead:
{% endmarkdown %}
{% codeExample 2 %}
.message {

View File

@ -6,7 +6,6 @@ introduction: >
with the CSS spec and helps catch errors more quickly.
---
{% markdown %}
## Hue
{% compatibility '1.32.0', false, null, false %}{% endcompatibility %}
@ -132,17 +131,15 @@ A future version of Sass will stop ignoring units for the `$limit` argument and
return a random integer with the same units.
[The `math.random()` function]: /documentation/modules/math#random
{% endmarkdown %}
{% codeExample 1, false %}
// Future Sass, doesn't work yet!
@debug math.random(100px); // 42px
===
// Future Sass, doesn't work yet!
@debug math.random(100px) // 42px
@debug math.random(100px) // 42px
{% endcodeExample %}
{% markdown %}
### Phase 1
{% compatibility '1.54.5', false, null, false %}{% endcompatibility %}
@ -210,4 +207,3 @@ units or with units other than `%` to `color.mix()` or `color.invert()`.
In Dart Sass 2.0.0, `list.nth()` and `list.set-nth()` will throw errors if
they're passed an index `$n` with a unit.
{% endmarkdown %}

View File

@ -7,7 +7,6 @@ introduction: >
overview: true
---
{% markdown %}
Before each breaking change is released, Sass implementations will produce
deprecation warnings for stylesheets whose behavior will change. Whenever
possible, these warnings will include suggestions for how to update the
@ -49,4 +48,3 @@ These breaking changes are coming soon or have recently been released:
Dart Sass users can opt in to treat deprecations as errors early using the
[`--fatal-deprecation` command line option](/documentation/cli/dart-sass#fatal-deprecation).
{% endmarkdown %}

View File

@ -8,7 +8,6 @@ introduction: >
{% compatibility '1.56.0', false, null, false %}{% endcompatibility %}
{% markdown %}
Because Sass supports almost any Sass expression in parenthesized media
conditions, there were a few constructs whose meaning was changed by adding full
support for Media Queries Level 4. Specifically:
@ -29,4 +28,3 @@ Fortunately, these came up very infrequently in practice.
First, we emitted deprecation warnings for the previous ambiguous cases. These
will have suggestions for how to preserve the existing behavior or how to use
the new CSS syntax.
{% endmarkdown %}

View File

@ -6,7 +6,6 @@ introduction: >
for parsing them.
---
{% markdown %}
Sass has historically supported a special parsing for the `@-moz-document` rule.
As [Firefox dropped support for them], Sass will also drop support for the special
parsing and will treat it as an unknown at-rule.
@ -16,7 +15,6 @@ parsing and will treat it as an unknown at-rule.
**There is one exception**: an empty url prefix function is still allowed, as
that's used in a hack targetting Firefox.
{% endmarkdown %}
{% codeExample 1 %}
@-moz-document url-prefix() {
@ -30,7 +28,6 @@ that's used in a hack targetting Firefox.
color: red
{% endcodeExample %}
{% markdown %}
## Transition Period
{% compatibility '1.7.2', false, null, false %}{% endcompatibility %}
@ -39,4 +36,3 @@ First, we'll emit deprecation warnings for all usages of `@-moz-document`
except for the empty url-prefix hack.
In Dart Sass 2.0, `@-moz-document` will be treated as an unknown at-rule.
{% endmarkdown %}

View File

@ -7,7 +7,6 @@ introduction: >
`/` as a separator.
---
{% markdown %}
{% compatibility 'partial', false, null, false %}{% endcompatibility %}
Today, Sass uses [complex heuristics][] to figure out whether a `/` should be
@ -27,7 +26,6 @@ similar to how `,` works today. Division will instead be written using the new
today.
This deprecation does not affect uses of `/` inside `calc()` expressions.
{% endmarkdown %}
{% codeExample 1 %}
@use "sass:math";
@ -50,7 +48,6 @@ This deprecation does not affect uses of `/` inside `calc()` expressions.
}
{% endcodeExample %}
{% markdown %}
## Transition Period
{% compatibility '1.33.0', false, null, false, 'math.div() and list.slash()' %}{% endcompatibility %}
@ -59,8 +56,7 @@ To ease the transition, we've begun by adding the `math.div()` function. The `/`
operator still does division for now, but it also prints a deprecation warning
when it does so. Users should switch all division to use `math.div()` instead.
{% include 'documentation/snippets/silence-deprecations' %}
{% endmarkdown %}
{% render 'documentation/snippets/silence-deprecations' %}
{% codeExample 2, false %}
@use "sass:math";
@ -80,7 +76,6 @@ when it does so. Users should switch all division to use `math.div()` instead.
@debug math.div(12px, 4px) // 3
{% endcodeExample %}
{% markdown %}
Slash-separated lists will also be available in the transition period. Because
they can't be created with `/` yet, the `list.slash()` function will be added to
create them. You will also be able to pass `"slash"` as the `$separator` to the
@ -88,7 +83,6 @@ create them. You will also be able to pass `"slash"` as the `$separator` to the
[`list.join()` function]: /documentation/modules/list#join
[`list.append()` function]: /documentation/modules/list#append
{% endmarkdown %}
{% codeExample 3 %}
@use "sass:list";
@ -111,15 +105,12 @@ create them. You will also be able to pass `"slash"` as the `$separator` to the
}
{% endcodeExample %}
{% markdown %}
{% compatibility '1.40.0', false, null, false, 'First-class calc' %}{% endcompatibility %}
Alternatively, users can wrap division operations inside a `calc()` expression,
which Sass will simplify to a single number.
{% endmarkdown %}
{% codeExample 4, false %}
<% example(autogen_css: false) do %>
// WRONG, will not work in future Sass versions.
@debug (12px/4px); // 3
@ -133,7 +124,6 @@ which Sass will simplify to a single number.
@debug calc(12px / 4px) // 3
{% endcodeExample %}
{% markdown %}
## Automatic Migration
You can use [the Sass migrator][] to automatically update your stylesheets to
@ -145,4 +135,3 @@ use `math.div()` and `list.slash()`.
$ npm install -g sass-migrator
$ sass-migrator division **/*.scss
```
{% endmarkdown %}

View File

@ -6,9 +6,7 @@ introduction: >
This confusing syntax is being deprecated.
---
{% markdown %}
How is this property compiled?
{% endmarkdown %}
{% codeExample 1, false %}
$size: 10px;
@ -23,7 +21,6 @@ div
margin: 15px -$size
{% endcodeExample %}
{% markdown %}
Some users might say "the `-` is attached to `$size`, so it should be `margin:
20px -10px`". Others might say "the `-` is between `20px` and `$size`, so it
should be `margin: 5px`." Sass currently agrees with the latter opinion, but the
@ -51,7 +48,7 @@ list, you'll (still) need to wrap it in parentheses:
We'll make this an error in Dart Sass 2.0.0, but until then it'll just emit a
deprecation warning.
{% include 'documentation/snippets/silence-deprecations' %}
{% render 'documentation/snippets/silence-deprecations' %}
## Automatic Migration
@ -65,4 +62,3 @@ existing behavior of these stylesheets.
$ npm install -g sass-migrator
$ sass-migrator strict-unary **/*.scss
```
{% endmarkdown %}