less中//单行注释编译后消失，因其为编译期注释，仅用于源码阅读，css不支持该语法，故被完全丢弃；而/ /多行注释会被保留，但位置依ast节点而非原缩进，且压缩模式下可能被移除。
Less里//单行注释为什么编译后没了
因为 // 是 Less 的“编译期注释”，只在 .less 源码中起作用，编译时被直接丢弃，CSS 本身不支持这种语法，所以不会出现在输出里。
这不是 bug，是设计行为。你写：.btn { // 这行注释不会进CSS color: @primary; }
编译后就只剩 .btn { color: #007bff; }，中间那行彻底消失。
- 所有
//注释都仅用于开发者阅读源码，对生成的 CSS 零影响 - 它不占输出体积、不干扰浏览器解析，但也不能用来做 CSS 层面的标记或调试
- 如果你希望注释出现在最终 CSS 中（比如给同事看、或供 postcss 插件识别），必须改用
/* ... */
/*多行注释为什么会保留但位置不对
/* ... */ 注释会被保留在编译后的 CSS 中，但位置可能和你预期不符——它不是“跟着声明走”，而是“跟着解析节点走”。
例如这段代码：.card { /* card 基础样式 */ padding: @gap; &-header { /* header 特有逻辑 */ font-weight: bold; } }
编译后注释会紧贴对应块的开头，但嵌套层级会让它们看起来“错位”或“重复出现”。
- 注释保留在它所在语句的 AST 节点附近，不是原样复制缩进位置
- 如果用了
@import，且被导入文件里也有/* */，这些注释会拼接到主文件对应位置，可能造成堆叠 - 压缩模式（
--compress）下，/* */会被删掉——它和空格、换行一样，属于“可删内容”
想让注释稳定出现在 CSS 里该怎么做
要确保注释既存在、又可控，得绕过 Less 默认行为，用变量 + 字符串拼接的方式“注入”：
@debug-note: ~"/* @debug: this is compiled-in */";<br>.btn { @{debug-note} background: @primary; }
-
~""是 Less 的转义字符串语法，能让内容原样输出到 CSS - 这种写法生成的注释是真实 CSS 注释，不受
--compress影响，也不会因嵌套/导入而移位 - 缺点是不能跨行，且需手动维护；适合关键调试点，不适合大段文档式注释
- 别在
@import (reference)文件里用这个技巧——它会被跳过，注释根本不出现在输出中
VS Code 里看不到注释对应的源码跳转
Source Map 对注释的支持很弱：即使开了 --source-map，// 注释不会映射，/* */ 注释也只映射到它所属的选择器块起始行，而非注释本身所在行。
- 这意味着你在浏览器 DevTools 里点击 CSS 中的
/* ... */，大概率跳不到 .less 里那行注释，而是跳到该选择器第一行 - VS Code 的 “Go to Definition” 或错误定位，对注释完全不响应
- 真正可靠的调试方式，是把关键逻辑拆成带名字的 mixin，再用
// DEBUG: xxx写在 mixin 定义末尾——编译后只有被调用的地方才保留这行
注释在 Less 里不是“装饰”，而是编译流程中的临时标记；想让它稳定落进 CSS，就得放弃语法糖，用字符串转义硬编码——这点容易被当成小问题忽略，但线上排查样式来源时，缺了可追溯的注释，往往多花半小时找错文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
