Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Indented syntax improvements] Update indented syntax docs #1291

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 27 additions & 10 deletions source/documentation/syntax/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,16 +47,10 @@ indentation instead of curly braces and semicolons to describe the format of the
document.

In general, any time you'd write curly braces in CSS or SCSS, you can just
indent one level deeper in the indented syntax. And any time a line ends, that
counts as a semicolon. There are also a few additional differences in the
indented syntax that are noted throughout the reference.

{% headsUp %}
The indented syntax currently doesn't support expressions that wrap across
multiple lines. See [issue #216].

[issue #216]: https://github.com/sass/sass/issues/216
{% endheadsUp %}
indent one level deeper in the indented syntax. And any time a line ends in a
place where a statement can end, that counts as a semicolon. There are also a
few additional differences in the indented syntax that are noted throughout the
reference.

The indented syntax looks like this:

Expand All @@ -80,3 +74,26 @@ The indented syntax looks like this:
cursor: default
pointer-events: none
```

### Multiline statements

{% compatibility 'dart: "1.84.0"', 'libsass: false', 'ruby: false' %}{% endcompatibility %}

In the indented syntax, statements can span multiple lines, as long as line
jamesnw marked this conversation as resolved.
Show resolved Hide resolved
breaks occur in places where the statement can’t end. This includes inside
parentheses or other brackets, or between keywords in a Sass-specific At Rule.
jamesnw marked this conversation as resolved.
Show resolved Hide resolved

```sass
.grid
display: grid
grid-template: (
"header" min-content
"main" 1fr
)

@for
$i from
1 through 3
ul:nth-child(3n + #{$i})
margin-left: $i * 10
```
3 changes: 2 additions & 1 deletion source/documentation/syntax/structure.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ declarations.

In SCSS, statements are separated by semicolons (which are optional if the
statement uses a block). In the indented syntax, they're just separated by
newlines.
newlines. While you can use a semicolon at the end of a statement in the
indented syntax, a newline is still required.

### Universal Statements

Expand Down
Loading