前端【免费下载链接】sassSass makes CSS fun!项目地址https://gitcode.com/gh_mirrors/sa/sass点击查看免费下载本篇指南围绕 Sass 官方语言提案 accepted/indented-syntax-improvements.md当前版本 Draft 1.2展开系统讲解.sass缩进语法在语句结束规则上的核心改进换行只在“语句可结束”的位置才有意义并新增分号作为显式结束符从而允许长列表、长表达式跨行书写。读完本文你将掌握缩进语法的多行书写规则、分号的使用边界、各类 at-rule 与声明中的换行约束以及这些规则在 spec/statement.md、spec/at-rules/unknown.md、spec/declarations.md 等规范文件中的正式语法定义。提案背景为什么缩进语法需要改进.sass缩进语法使用空白whitespace承担两种职责用换行结束语句、用缩进表示嵌套层级。这种设计被一部分作者喜爱但带来了明显的书写难题——尤其是长列表难以排版。以font-face的src列表为例列表元素极长在传统缩进语法下必须写在同一行代码可读性很差。本提案对应 accepted/indented-syntax-improvements.changes.md 中的 Draft 1 初始草案正是为了解决这类痛点而提出。提案核心多行语句与分号本提案为缩进语法新增两项能力多行语句multiline statements换行不再无条件结束语句而是只在“语句可以结束”的位置结束语句其他位置的换行被视为无意义的空白。分号semicolons作者可以用分号显式结束一条语句。两项改动都是**纯增量additive**的不破坏任何现有写法作者可以选择不使用新语法也可以通过 linter 限制新语法的使用见 accepted/indented-syntax-improvements.md 的 Design Decisions 一节。换行规则只有“语句可结束”的位置换行才有意义在传统缩进语法中换行总是结束一条语句这限制了作者的排版自由。但解析器可以依据上下文判断在某个位置一条语句是否允许结束。因此提案规定换行仅在语句可以结束的位置结束语句其他情况下换行被当作无意义的空白处理。官方提案给出了一个典型示例in之后、插值#{}内部、乘法运算符之后都不能结束语句因此这些位置的换行不会切断语句each $item in 1 2 3 .item-#{ $item } content: $item * 10此外把表达式用圆括号包裹起来也能自由换行。例如font-face中把src的多行列表包进()font-face font-family: Leatherman src: ( local(Leatherman), url(leatherman-COLRv1.otf) format(opentype) tech(color-COLRv1), url(leatherman-outline.otf) format(opentype), url(leatherman-outline.woff) format(woff) )这一规则改变了 spec/statement.md 中对IndentedStatements的既有约束。现行规范中有如下说明该说明在本提案中被移除TheStatementproductions may not include newlines outside ofIndentSameproductions.即旧规则下语句产生式在IndentSame之外不允许包含换行而新提案放开这一限制。分号显式结束语句缩进语法下作者现在可以用分号显式结束一条语句$font-stack: Helvetica, sans-serif; // 或者不写分号 $primary-color: #333但要注意一个重要限制同一块block中后续行仍必须保持相同缩进级别。这意味着缩进语法不支持在一行内写多条语句即使它们用分号分隔也不行。分号只是“提前结束当前语句”的标记不会改变缩进对语句结构的控制作用。语句在哪些位置会被换行结束按设计换行在未定义“语句可结束”的上下文中一律被当作无意义空白忽略。但如果作者把一个本意无意义的换行放在了语句可以结束的位置语句就会在此结束后续文本很可能导致解析失败。以下是换行会造成语句结束的几种情况。在 SassScript 值之后在简单的声明中$foo: bar \n的换行必须结束语句。这一点在较复杂的场景中可能出人意料尤其是二元运算符$foo: 3\n 4\n在3之后结束语句随后 4变成新的语句$foo: 3 \n4\n在4之后结束语句用圆括号包裹则更灵活$foo: (3\n 4)。这也适用于流程控制 at-rule。if $a \n and $b会在$a之后结束语句解析很可能失败而if ($a \n and $b)可以被正常解析。非封闭列表开始之后未被[]或()封闭的列表中出现换行必须引起语句中断$var: 1 2\n3和$var: 1, 2\n, 3无法被解析——解析器无法确定语句在何处结束可解析的替代写法包括$var: (1 2\n3)、$var: [1 2\n3]、$var: (1, 2,\n 3)。逗号分隔的列表不能依靠尾部逗号来表示列表跨行继续——因为 Sass 列表本来就允许尾随逗号若以此语义区分会破坏现有带尾随逗号的样式表。反过来有两类结构天然不受影响函数/混入参数参数本身就被()包裹因此参数内的换行不需要触发语句结束插值插值被#{}包裹换行同样不需要结束语句。原生 CSS at-rule对任何原生 CSS 支持的 at-rule之后以及块或语句之前的换行不被支持。例外是括号内部的换行被允许。涉及的范围包括import它与 Sass 的 import 有重叠、supports、media、keyframes以及任何未知 at-rule。这些规则应当原样输出emitted as isSass 不做任何特殊处理包括其中所有的括号。设计决策边界与取舍提案的 Design Decisions 一节明确了以下取舍这些内容对理解规则的适用范围至关重要不为 CSS at-rule 定制换行语义某些 CSS at-rule 的上下文中换行可能没有意义但为它们定制换行处理超出了本提案范围。例如media (hover: hover) and \n (color)不被支持尽管在普通 SassScript 中布尔运算符之后的换行一般不结束语句。这样做的目的是避免 Sass 为新增的 CSS at-rule 持续维护特殊支持。不引入其他语言的续行语法提案曾考虑借鉴 YAML 的行首/|或 HAML 的行尾|作为续行标记。但这些会为 Sass 引入全新语法且可能与未来的 CSS 特性产生冲突因此最终选择向SCSS 语法借力即圆括号、方括号、分号这些 SCSS 已有写法。面向所有作者统一生效改动针对所有使用缩进语法的作者而非引入单独的语法或编译器开关。由于改动是纯增量的不采用新语法的作者不会受到影响。SCSS-in-Sass 语法被移除提案最初版本曾包含一种“SCSS-in-Sass”语法——缩进语法中花括号内的规则以 SCSS 语法解析。该特性因工具链作者在 issue #3991 中的反馈而被移除见 accepted/indented-syntax-improvements.changes.md 中 Draft 1.1 的记录。语法定义的正式变更提案的 Syntax 部分给出了对规范文件的具体修改点这里逐一对照仓库中的现行规范进行说明。IndentedStatementsspec/statement.mdIndentedStatements的新产生式为IndentedStatements :: (Statement ;? IndentSame)* Statement ;?对比现行规范 spec/statement.md 中的定义IndentedStatements :: (Statement IndentSame)* Statement变化在于每条语句之后允许出现一个可选的;;?。同时提案要求删除现行规范中的一句说明“TheStatementproductions may not include newlines outside ofIndentSameproductions”即放开“语句内部不得含换行”的约束与多行表达式的目标一致。其中IndentSame与IndentMore在 spec/statement.md 中定义负责匹配换行后与当前缩进级别相同或更深一层的缩进。Current即“当前缩进级别”current indentation level初始值为 0每消费一个IndentSame/IndentMore后更新为实际找到的缩进字符数量。WhitespaceCommentspec/statement.mdWhitespaceComment产生式(// .*) | (/* .* */)的脚注 2 中有一句限制“In the indented syntax, this may not contain newlines.”缩进语法下注释内不得含换行。本提案删除此句使缩进语法下的块注释能够跨行。Whitespacespec/statement.md现行规范中Whitespace :: LineBreak? | Space | Tab | WhitespaceComment的脚注 1 是“This is not allowed in the indented syntax.”换行在缩进语法中不属于空白。提案将其替换为更精细的规则在缩进语法中LineBreak在ImportAtRule、SupportsAtRule或MediaAtRule中不是空白但在 CSS 语法定义的括号或方括号内除外。若Whitespace中的LineBreak会与IndentSame或IndentMore产生歧义优先解析为IndentSame或IndentMore。这正好落实了“原生 CSS at-rule 除括号内不支持换行”的语义同时保证缩进判定优先于普通空白。MediaAtRule的具体语法参见 spec/at-rules/media.md其中MediaInParens的括号结构正是换行得以存在的位置。Unknown At-Rulesspec/at-rules/unknown.md现行规范中UnknownAtRule的语法为UnknownAtRule :: InterpolatedIdentifier¹ InterpolatedValue? Block? | function² InterpolatedIdentifier³ InterpolatedValue? Block脚注 1 说明“此标识符不得与 Sass 定义的其他 at-rule 重名”正文则要求“之后不允许出现空白”。提案将正文第一句替换为之后不允许空白在缩进语法中InterpolatedIdentifier之后的LineBreak不被视为空白。这意味着未知 at-rule 的标识符之后不能紧跟换行对应 accepted/indented-syntax-improvements.changes.md 中 Draft 1.2 的第一条记录“Forbid newlines following the identifier in Unknown At-Rules”。Declarationsspec/declarations.mdDeclaration的语法定义如下Declaration :: StandardDeclaration | CustomDeclaration StandardDeclaration :: InterpolatedIdentifier¹ : (Value | Value? Block) CustomDeclaration :: (InterpolatedIdentifier² | result³) : InterpolatedDeclarationValue提案将脚注 1 替换为标识符不得以--开头。在缩进语法中LineBreak不被视为空白即使在不允许选择器的上下文中也是如此以避免不同上下文间行为不一致。即声明名称之后、冒号之前不允许换行对应 Draft 1.2 的第二条记录“Forbid newlines in declarations before a colon”。注意该约束刻意在“允许选择器的上下文”与“不允许选择器的上下文”中保持一致避免同一写法在不同位置表现各异。版本演进记录accepted/indented-syntax-improvements.changes.md 记录了该提案的演进历程Draft 1初始草案提出多行表达式与分号支持的整体方案Draft 1.1移除 SCSS-in-Sass 语法因工具链作者反馈Draft 1.2禁止未知 at-rule 标识符后的换行禁止声明冒号前的换行。在规范体系中的位置与适用前提本提案属于 Sass 的“living specification”活规范体系。如 spec/README.md 所述Sass 规范没有编号版本之分各实现可支持规范的不同子集参考实现Dart Sass通常尽量贴近完整规范。本提案对应缩进语法.sass其生效前提是当前实现已经支持相应语法的解析语法选择由源码文件扩展名决定.sass对应缩进语法.css对应 CSS其余为 SCSS见 spec/syntax.md 与 spec/README.md 中 Compiling a Path 的说明缩进字符遵循 spec/statement.md 的规定文档中首个用于IndentMore的空格或制表符被确定为“文档缩进字符”此后不得混用其他字符。小结indented-syntax-improvements提案以“换行只在语句可结束时才有意义”为核心配合分号显式结束符在不破坏既有.sass代码的前提下让长表达式、长列表与原生 CSS at-rule 的参数可以自然跨行排版。它的语法约束被精确落位到 spec/statement.md、spec/at-rules/unknown.md、spec/declarations.md 等规范文件中并以 accepted/indented-syntax-improvements.changes.md 持续追踪版本演进。对于.sass语法的作者与 Sass 实现者而言掌握“何时换行会结束语句、何时只是空白”这两条边界就能安全地使用多行写法提升代码可读性。赞分享前端【免费下载链接】sassSass makes CSS fun!项目地址https://gitcode.com/gh_mirrors/sa/sass点击查看免费下载相关推荐Crystal 1.2 版本深度解读编译器、语言特性与标准库的全面改进Changelog 1.2 系列Crystal 1.2 版本深度解读编译器、语言特性与标准库的全面改进Changelog 1.2 系列 Crystal 1.2 系列是 2021 年秋季发编程语言编译器标准库语言运行时Ruby语法杂项详解表达式终止、缩进与特殊关键字Ruby语法杂项详解表达式终止、缩进与特殊关键字 表达式终止规则 在Ruby中换行符通常被视为表达式的结束标志。不过当一行以操作符、左括号或逗号等符号结尾编程语言语言运行时解释器编译器标准库JIT编译Prettier 1.19 深度解析Vue 缩进选项、TypeScript 3.7 与新一代 JavaScript 语法支持Prettier 1.19 深度解析Vue 缩进选项、TypeScript 3.7 与新一代 JavaScript 语法支持 Prettier 1.19.0开发工具格式化CLI创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考