<p>Less中注释必须用/ /，//会被原样输出致CSS非法；/ /在编译时剥离，但嵌套位置不当会干扰压缩；有效注释需说明“为什么”，而非“写了什么”，并精准绑定上下文。</p>
注释本身不改变CSS行为，但它直接决定你下次打开文件时是“秒懂逻辑”还是“盯着屏幕发呆”。Less里写错注释，比不写还危险。
注释在Less中会被编译器怎么处理
Less只认/* */，//是无效语法——它不会报错，但会被当作普通文本原样输出到CSS里，导致生成非法样式或空白行。比如写// 主按钮悬停色，编译后变成一行孤立的// 主按钮悬停色，浏览器直接忽略，还可能干扰压缩器判断。
-
/* */注释在编译阶段就被完全剥离，不进最终CSS，也不占体积 - 嵌套在
.mixin内部的/* */会保留在调用处生成的CSS上方，影响压缩结果（比如被误判为可删空行） - 媒体查询、伪类嵌套块里的
/* */位置要小心：写在规则末尾（如color: red; /* 覆盖默认色 */）才安全；写在属性名前（如/* 覆盖默认色 */ color: red;）会导致注释飘到上一个规则后面
哪些注释能真正帮人读懂代码
能留下来的注释，必须回答“为什么这么写”，而不是“写了什么”。比如/* 为兼容 Safari 15.4 的 flex gap fallback */比/* 设置外边距 */有用十倍。
- 变量定义处加注释说明设计意图：
@primary-color: #007bff; /* 品牌主色，用于所有交互元素和强调文案 */ - 混入调用处标注业务含义：
.btn-primary { .btn-base(); /* 主行动按钮，带阴影与 hover 动效 */ } - 复杂计算旁注明来源：
line-height: (@font-size-base * 1.5); /* 24px 行高，符合 WCAG 1.4.8 行距要求 */ - 避免在
@import行后写/* 引入重置样式 */——这类说明应统一放在_reset.less文件顶部
嵌套结构里注释容易踩的坑
嵌套层级越深，注释越容易“失焦”。你写的/* 卡片标题样式 */可能实际对应的是编译后.card .header .title这个四层选择器，而别人调试时只看到.title类，根本找不到上下文。
立即学习“前端免费学习笔记（深入）”；
- 嵌套块开头写注释，必须明确指向当前块语义：
.modal { /* 模态框整体容器，含 backdrop 和 content 区域 */ - 不要在
&:hover块里写/* 鼠标悬停效果 */——这是废话；改成/* 提升对比度以满足 AA 级可访问性 */ - 媒体查询内嵌套时，注释优先绑定断点意图：
@media (max-width: 768px) { /* 移动端折叠导航栏，隐藏二级菜单 */ .nav { ... } } - 用
&.is-active拼接类名时，注释要写在拼接行，不是父选择器下：.tab { &.is-active { color: @active-color; /* 当前选中项，使用高亮色 */ } }
最难的不是写注释，而是每次敲下/*前，得确认这句话未来三个月还有人能靠它定位问题——而不是只服务当下的自己。
