mirror of
https://github.com/danog/sass-site.git
synced 2024-11-30 04:29:17 +01:00
Convert to md
This commit is contained in:
parent
619bfd24b1
commit
7988595f56
@ -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 %}
|
@ -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;
|
@ -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 %}
|
@ -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 {
|
@ -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 %}
|
@ -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 %}
|
@ -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 %}
|
@ -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 %}
|
@ -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 %}
|
@ -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 %}
|
Loading…
Reference in New Issue
Block a user