mirror of
https://github.com/danog/sass-site.git
synced 2025-01-22 13:51:46 +01:00
Merge branch 'main' of github.com:sass/sass-site
* 'main' of github.com:sass/sass-site: Document the floating-point numbers spec (#708) Cut a release for a new Dart Sass version Document constants in calculations (#707) Fix redirects for random-with-units and color-units (#706) Fix multiple typos (#703) Revert "Bump nokogiri from 1.12.5 to 1.13.10 (#699)" (#705) Bump nokogiri from 1.12.5 to 1.13.10 (#699) Cut a release for a new Dart Sass version Cut a release for a new Dart Sass version Cut a release for a new Dart Sass version Cut a release for a new Dart Sass version Document --fatal-deprecation (#702) Partially roll back #698 Document string.split() Bump versions of GitHub actions (#698) Fix broken markdown link in meta.function-exists (#697) Remove unmaintained links (#696) Cut a release for a new Dart Sass version Cut a release for a new Dart Sass version Cut a release for a new Dart Sass version
This commit is contained in:
Jonny Gerig Meyer
commit
c1e5da4022
@ -72,8 +72,10 @@ Dir['old_source/documentation/breaking-changes/**'].each do |file|
|
||||
end
|
||||
|
||||
for url in %w[d/random-with-units documentation/breaking-changes/random-with-units
|
||||
d/breaking-changes/color-units documentation/breaking-changes/color-units] do
|
||||
redirect url, to: "/documentation/breaking-changes/function-units"
|
||||
d/color-units documentation/breaking-changes/color-units] do
|
||||
# Middleman and GitHub Pages require the origin URL to contain an extension,
|
||||
# otherwise it will serve the redirect as "octet-stream".
|
||||
redirect "#{url}.html", to: "/documentation/breaking-changes/function-units"
|
||||
end
|
||||
|
||||
redirect 'tutorial.html', to: '/guide'
|
||||
|
||||
@ -36,8 +36,8 @@ required to have quotes.
|
||||
This makes it very difficult for people (or tools) to tell where anything is
|
||||
defined.
|
||||
|
||||
* Because everything's global, libraries must prefix to all their members to
|
||||
avoid naming collisions.
|
||||
* Because everything's global, libraries must add a prefix to all their
|
||||
members to avoid naming collisions.
|
||||
|
||||
* [`@extend` rules][] are also global, which makes it difficult to predict
|
||||
which style rules will be extended.
|
||||
|
||||
@ -40,3 +40,8 @@ These breaking changes are coming soon or have recently been released:
|
||||
|
||||
* [The syntax for CSS custom property values changed](breaking-changes/css-vars)
|
||||
in Dart Sass 1.0.0, LibSass 3.5.0, and Ruby Sass 3.5.0.
|
||||
|
||||
## Early Opt-In
|
||||
|
||||
Dart Sass users can opt in to treat deprecations as errors early using the
|
||||
[`--fatal-deprecation` command line option](cli/dart-sass#fatal-deprecation).
|
||||
|
||||
@ -437,6 +437,98 @@ path] to be a "dependency". This flag doesn't affect the [`@warn` rule] or the
|
||||
$ sass --load-path=node_modules --quiet-deps style.scss style.css
|
||||
```
|
||||
|
||||
#### `--fatal-deprecation`
|
||||
|
||||
<% impl_status dart: '1.59.0' %>
|
||||
|
||||
|
||||
This option tells Sass to treat a particular type of deprecation warning as
|
||||
an error. For example, this command tells Sass to treat deprecation
|
||||
warnings for `/`-as-division as errors:
|
||||
|
||||
```shellsession
|
||||
$ sass --fatal-deprecation=slash-div style.scss style.css
|
||||
Error: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
|
||||
|
||||
Recommendation: math.div(4, 2) or calc(4 / 2)
|
||||
|
||||
More info and automated migrator: https://sass-lang.com/d/slash-div
|
||||
|
||||
This is only an error because you've set the slash-div deprecation to be fatal.
|
||||
Remove this setting if you need to keep using this feature.
|
||||
╷
|
||||
1 │ a { b: (4/2); }
|
||||
│ ^^^
|
||||
╵
|
||||
style.scss 1:9 root stylesheet
|
||||
```
|
||||
|
||||
The following deprecation IDs can be passed to this option:
|
||||
|
||||
<table style="width:100%">
|
||||
<thead>
|
||||
<tr style="text-align: left">
|
||||
<th>ID</th>
|
||||
<th>Version</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>call-string</code></td>
|
||||
<td>0.0.0</td>
|
||||
<td>Passing a string directly to <code>meta.call()</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>elseif</code></td>
|
||||
<td>1.3.2</td>
|
||||
<td>Using <code>@elseif</code> instead of <code>@else if</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="../breaking-changes/moz-document"><code>moz-document</code></a></td>
|
||||
<td>1.7.2</td>
|
||||
<td>Using <code>@-moz-document</code> (except for the empty url prefix hack).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>new-global</code></td>
|
||||
<td>1.17.2</td>
|
||||
<td>Declaring new variables with <code>!global</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>color-module-compat</code></td>
|
||||
<td>1.23.0</td>
|
||||
<td>Using color module functions in place of plain CSS functions.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="../breaking-changes/slash-div"><code>slash-div</code></a></td>
|
||||
<td>1.33.0</td>
|
||||
<td>Using the <code>/</code> operator for division.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="../breaking-changes/bogus-combinators"><code>bogus-combinators</code></a></td>
|
||||
<td>1.54.0</td>
|
||||
<td>Leading, trailing, and repeated combinators.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="../breaking-changes/strict-unary"><code>strict-unary</code></a></td>
|
||||
<td>1.55.0</td>
|
||||
<td>Ambiguous <code>+</code> and <code>-</code> operators.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="../breaking-changes/function-units"><code>function-units</code></a></td>
|
||||
<td>1.56.0</td>
|
||||
<td>Passing invalid units to built-in functions.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Alternatively, you can pass a Dart Sass version to treat all deprecations that
|
||||
were present in that version as errors. For example,
|
||||
`--fatal-deprecation=1.33.0` would treat all deprecations in the
|
||||
table above up to and including `slash-div` as errors, but leave any newer
|
||||
deprecations as warnings.
|
||||
|
||||
|
||||
#### `--trace`
|
||||
|
||||
This flag tells Sass to print the full Dart or JavaScript stack trace when an
|
||||
|
||||
@ -9,14 +9,75 @@ title: sass:math
|
||||
<% function 'math.$e' do %>
|
||||
<% impl_status dart: '1.25.0', libsass: false, ruby: false %>
|
||||
|
||||
Equal to the value of the [mathematical constant *e*][].
|
||||
The closest 64-bit floating point approximation of the [mathematical constant
|
||||
*e*][].
|
||||
|
||||
[mathematical constant *e*]: https://en.wikipedia.org/wiki/E_(mathematical_constant)
|
||||
|
||||
<% example(autogen_css: false) do %>
|
||||
@debug math.$e; // 2.7182818285
|
||||
===
|
||||
@debug math.$e // 2.7182818285
|
||||
@debug math.$e // 2.7182818285
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
|
||||
<% function 'math.$epsilon' do %>
|
||||
<% impl_status dart: '1.55.0', libsass: false, ruby: false %>
|
||||
|
||||
The difference between 1 and the smallest 64-bit floating point number greater
|
||||
than 1 according to floating-point comparisons. Because of Sass numbers' [10
|
||||
digits of precision](../values/numbers), in many cases this will appear to
|
||||
be 0.
|
||||
<% end %>
|
||||
|
||||
<% function 'math.$max-number' do %>
|
||||
<% impl_status dart: '1.55.0', libsass: false, ruby: false %>
|
||||
|
||||
The maximum finite number that can be represented as a 64-bit floating point
|
||||
number.
|
||||
|
||||
<% example(autogen_css: false) do %>
|
||||
@debug math.$max-number; // 179769313486231570000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
|
||||
===
|
||||
@debug math.$max-number // 179769313486231570000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
|
||||
<% function 'math.$max-safe-integer' do %>
|
||||
<% impl_status dart: '1.55.0', libsass: false, ruby: false %>
|
||||
|
||||
The maximum integer `n` such that both `n` and `n + 1` can be precisely
|
||||
represented as a 64-bit floating-point number.
|
||||
|
||||
<% example(autogen_css: false) do %>
|
||||
@debug math.$max-safe-integer; // 9007199254740991
|
||||
===
|
||||
@debug math.$max-safe-integer // 9007199254740991
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
|
||||
<% function 'math.$min-number' do %>
|
||||
<% impl_status dart: '1.55.0', libsass: false, ruby: false %>
|
||||
|
||||
The smallest positive number that can be represented as a 64-bit floating
|
||||
point number. Because of Sass numbers' [10 digits of
|
||||
precision](../values/numbers), in many cases this will appear to be 0.
|
||||
<% end %>
|
||||
|
||||
|
||||
<% function 'math.$min-safe-integer' do %>
|
||||
<% impl_status dart: '1.55.0', libsass: false, ruby: false %>
|
||||
|
||||
The minimum integer `n` such that both `n` and `n - 1` can be precisely
|
||||
represented as a 64-bit floating-point number.
|
||||
|
||||
<% example(autogen_css: false) do %>
|
||||
@debug math.$min-safe-integer; // -9007199254740991
|
||||
===
|
||||
@debug math.$min-safe-integer // -9007199254740991
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
@ -24,14 +85,14 @@ title: sass:math
|
||||
<% function 'math.$pi' do %>
|
||||
<% impl_status dart: '1.25.0', libsass: false, ruby: false %>
|
||||
|
||||
Equal to the value of the [mathematical constant *π*][].
|
||||
The closest 64-bit floating point approximation of the [mathematical constant *π*][].
|
||||
|
||||
[mathematical constant *π*]: https://en.wikipedia.org/wiki/Pi
|
||||
|
||||
<% example(autogen_css: false) do %>
|
||||
@debug math.$pi; // 3.1415926536
|
||||
===
|
||||
@debug math.$pi // 3.1415926536
|
||||
@debug math.$pi // 3.1415926536
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
|
||||
@ -229,6 +229,8 @@ title: sass:meta
|
||||
function definition. `$module` must be a string matching the namespace of a
|
||||
[`@use` rule][] in the current file.
|
||||
|
||||
[`@use` rule]: ../at-rules/use
|
||||
|
||||
<% example(autogen_css: false) do %>
|
||||
@use "sass:math";
|
||||
|
||||
|
||||
@ -50,7 +50,7 @@ title: sass:string
|
||||
@debug string.insert("Roboto Bold", " Mono", -6) // "Roboto Mono Bold"
|
||||
<% end %>
|
||||
|
||||
If of `$index` is higher than the length of `$string`, `$insert` is added to
|
||||
If `$index` is higher than the length of `$string`, `$insert` is added to
|
||||
the end. If `$index` is smaller than the negative length of the string,
|
||||
`$insert` is added to the beginning.
|
||||
|
||||
@ -101,6 +101,29 @@ title: sass:string
|
||||
<% end %>
|
||||
|
||||
|
||||
<% function 'string.split($string, $separator, $limit: null)',
|
||||
returns: 'list' do %>
|
||||
<% impl_status dart: '1.57.0', libsass: false, ruby: false %>
|
||||
|
||||
Returns a bracketed, comma-separated list of substrings of `$string` that are
|
||||
separated by `$separator`. The `$separator`s aren't included in these
|
||||
substrings.
|
||||
|
||||
If `$limit` is a number `1` or higher, this splits on at most that many
|
||||
`$separator`s (and so returns at most `$limit + 1` strings). The last
|
||||
substring contains the rest of the string, including any remaining
|
||||
`$separator`s.
|
||||
|
||||
<% example(autogen_css: false) do %>
|
||||
@debug string.split("Segoe UI Emoji", " "); // ["Segoe", "UI", "Emoji"]
|
||||
@debug string.split("Segoe UI Emoji", " ", $limit: 1); // ["Segoe", "UI Emoji"]
|
||||
===
|
||||
@debug string.split("Segoe UI Emoji", " ") // ["Segoe", "UI", "Emoji"]
|
||||
@debug string.split("Segoe UI Emoji", " ", $limit: 1) // ["Segoe", "UI Emoji"]
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
|
||||
<% function 'string.to-upper-case($string)',
|
||||
'to-upper-case($string)',
|
||||
returns: 'string' do %>
|
||||
|
||||
@ -46,7 +46,7 @@ that can be written to CSS, with a few exceptions:
|
||||
|
||||
<% heads_up do %>
|
||||
It's often cleaner and clearer to use [interpolation][] to create strings,
|
||||
rather than relying on this operators.
|
||||
rather than relying on these operators.
|
||||
|
||||
[interpolation]: ../interpolation
|
||||
<% end %>
|
||||
|
||||
@ -54,7 +54,7 @@ written with `//` are never emitted as CSS, but unlike SCSS everything indented
|
||||
beneath the opening `//` is also commented out.
|
||||
|
||||
Indented syntax comments that start with `/*` work with indentation the same
|
||||
way, except that they are compiled to CSS. Because the extend of the comment is
|
||||
way, except that they are compiled to CSS. Because the extent of the comment is
|
||||
based on indentation, the closing `*/` is optional. Also like SCSS, `/*`
|
||||
comments can contain [interpolation][] and can start with `/*!` to avoid being
|
||||
stripped in compressed mode.
|
||||
|
||||
@ -116,6 +116,51 @@ exactly where calculations are allowed and where they aren't.
|
||||
@debug calc($width * 2); // calc((100% + 10px) * 2);
|
||||
<% end %>
|
||||
|
||||
## Constants
|
||||
|
||||
<% impl_status dart: "1.60.0", libsass: false, ruby: false %>
|
||||
|
||||
Calculations can also contain constants, which are written as CSS identifiers.
|
||||
For forwards-compatibility with future CSS specs, *all* identifiers are allowed,
|
||||
and by default they're just treated as unquoted strings that are passed-through
|
||||
as-is.
|
||||
|
||||
<% example(autogen_css: false) do %>
|
||||
@debug calc(h + 30deg); // calc(h + 30deg);
|
||||
===
|
||||
@debug calc(h + 30deg) // calc(h + 30deg);
|
||||
<% end %>
|
||||
|
||||
Sass automatically resolves a few special constant names that are specified in
|
||||
CSS to unitless numbers:
|
||||
|
||||
* `pi` is a shorthand for the [mathematical constant *π*].
|
||||
|
||||
[mathematical constant *π*]: https://en.wikipedia.org/wiki/Pi
|
||||
|
||||
* `e` is a shorthand for the [mathematical constant *e*].
|
||||
|
||||
[mathematical constant *e*]: https://en.wikipedia.org/wiki/E_(mathematical_constant)
|
||||
|
||||
* `infinity`, `-infinity`, and `NaN` represent the corresponding floating-point
|
||||
values.
|
||||
|
||||
<% example(autogen_css: false) do %>
|
||||
@use 'sass:math';
|
||||
|
||||
@debug calc(pi); // 3.1415926536
|
||||
@debug calc(e); // 2.7182818285
|
||||
@debug calc(infinity) > math.$max-number; // true
|
||||
@debug calc(-infinity) < math.$min-number; // true
|
||||
===
|
||||
@use 'sass:math'
|
||||
|
||||
@debug calc(pi) // 3.1415926536
|
||||
@debug calc(e) // 2.7182818285
|
||||
@debug calc(infinity) > math.$max-number // true
|
||||
@debug calc(-infinity) < math.$min-number // true
|
||||
<% end %>
|
||||
|
||||
## `min()` and `max()`
|
||||
|
||||
<% impl_status dart: ">=1.11.0 <1.42.0", libsass: false, ruby: false, feature: "Special function syntax" do %>
|
||||
|
||||
@ -51,8 +51,9 @@ been spotty, Sass always compiles it to fully expanded numbers.
|
||||
forwards-compatibility.
|
||||
<% end %>
|
||||
|
||||
Sass numbers support up to 10 digits of precision after the decimal point. This
|
||||
means a few different things:
|
||||
Sass numbers are represented internally as 64-bit floating point values. They
|
||||
support up to 10 digits of precision after the decimal point when serialized to
|
||||
CSS and for the purposes of equality. This means a few different things:
|
||||
|
||||
* Only the first ten digits of a number after the decimal point will be included
|
||||
in the generated CSS.
|
||||
|
||||
@ -21,17 +21,6 @@ no_container: true
|
||||
(Paid)
|
||||
Mac
|
||||
|
||||
%li
|
||||
= link_to 'Hammer', 'http://hammerformac.com/'
|
||||
(Paid)
|
||||
Mac
|
||||
|
||||
%li
|
||||
= link_to 'LiveReload', 'http://livereload.com/'
|
||||
(Paid, Open Source)
|
||||
Mac
|
||||
Windows
|
||||
|
||||
%li
|
||||
= link_to 'Prepros', 'https://prepros.io/'
|
||||
(Paid)
|
||||
@ -39,13 +28,6 @@ no_container: true
|
||||
Windows
|
||||
Linux
|
||||
|
||||
%li
|
||||
= link_to 'Scout-App', 'http://scout-app.io/'
|
||||
(Free, Open Source)
|
||||
Windows
|
||||
Linux
|
||||
Mac
|
||||
|
||||
:markdown
|
||||
## Libraries
|
||||
|
||||
|
||||
@ -17,10 +17,7 @@ most of the applications for free but a few of them are paid apps
|
||||
<small>(and totally worth it)</small>.
|
||||
|
||||
- [CodeKit](https://codekitapp.com/) (Paid) Mac
|
||||
- [Hammer](https://hammerformac.com/) (Paid) Mac
|
||||
- [LiveReload](http://livereload.com/) (Paid, Open Source) Mac Windows
|
||||
- [Prepros](https://prepros.io/) (Paid) Mac Windows Linux
|
||||
- [Scout-App](https://scout-app.io/) (Free, Open Source) Windows Linux Mac
|
||||
|
||||
## Libraries
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user