原生 css 的 @nest 是强制语法标记，必须显式声明且位置严格受限；sass 的 & 是自由父选择器，支持插值、重复和任意位置组合。

原生 CSS 中 @nest 是强制语法标记，不是可选糖衣

原生 CSS 嵌套不是“让嵌套生效”，而是“显式声明一条嵌套规则”。@nest 必须出现，且只能在规则块内部使用。漏写、错位或嵌套在另一个 @nest 里，整条规则都会被浏览器静默丢弃。

• @nest & .title ✅ 合法，生成 .card .title
• & .title ❌ 非法，浏览器直接忽略整条 .card { ... } 规则
• @nest & ul { @nest & li { ... } } ❌ 语法错误，不支持嵌套 @nest
• @nest &.active:hover ✅ 合法，但 &:hover 在原生中不能单独用，必须包在 @nest 里

Sass 中 & 是自由父选择器引用，无需额外关键字

Sass 的 & 不依赖任何包裹规则，它在任意嵌套层级内都有效，还能参与组合、插值、伪类拼接——这是构建时预处理赋予的灵活性，也是容易失控的根源。

Miller CSV TSV JSON 数据处理器

Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载

• .card { &:hover { color: blue; } } → 编译为 .card:hover { color: blue; }
• .btn { &--primary { &.is-loading { ... } } } → 输出 .btn--primary.is-loading
• .list { & > li { &::before { ... } } } → 深度展开无限制，但编译后选择器特异性飙升
• 过度嵌套如 .a { .b { .c { .d { ... } } } } 会生成四层后代选择器，gzip 后体积实测增加 15%~30%

& 在两种环境中的位置约束完全不同

原生 CSS 对 & 的位置极其苛刻：它只能出现在 @nest 内部、选择器最开头，且后面必须紧跟字符（不能有空格）；Sass 则允许 & 出现在选择器任意位置，甚至能多次使用。

• 原生合法：@nest &.active、@nest & > span、@nest &::before
• 原生非法：@nest .active &、@nest & .active（中间有空格）、@nest&.active（紧贴无空格但缺空格）
• Sass 合法：&:hover &::after、.item#{&}-selected、& + &
• Sass 中 & 可以重复、插值、与字符串拼接，原生中这些全部无效

属性嵌套和多层 @nest 是 Sass 独占能力

原生 CSS 完全不支持属性嵌套（如 margin: { top: 10px; bottom: 5px; }），也不允许把嵌套逻辑拆成多步声明。所有路径必须一次性写全，且仅限单层 @nest。

• 原生不识别 font: { size: 16px; weight: bold; } —— 直接解析失败，整条规则作废
• 原生要求：@nest & ul li a ✅，但 @nest & ul { ... @nest & li { ... } } ❌
• Sass 支持无限层级嵌套 + 属性分组 + @at-root 提升作用域，但代价是调试困难、输出不可控
• 真正容易被忽略的是：原生 @nest 不是“简化写法”，而是运行时选择器构造机制；Sass 嵌套是源码组织手段，二者设计目标根本不同

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！