以下是关于 LESS 中注释的简明总结和用法说明：

一、两种类型

类型	语法	编译行为	适用场景
单行注释	// 注释内容	不保留（编译后被移除）	临时调试、简短说明（开发阶段可见）
多行注释	/* 注释内容 */	保留（输出到 CSS 文件）	正式文档、版权声明、模块说明

二、基本用法

1. 单行注释（开发阶段专用）

// 主容器基准宽度
@base-width: 1200px;

.container {
  width: @base-width;
  // margin: 0 auto; // 暂时禁用此属性
}

2. 多行注释（保留到 CSS）

/* 
 * 模块：按钮组件
 * 作者：Alice
 * 更新：2023-10-01
 */
.button {
  padding: 8px 16px;
}

三、高级用法

1. 强制保留注释（压缩模式）

/*! 重要：此样式不可删除 */
.header {
  color: red;
}

• 以 /*! 开头的注释在压缩后仍保留。

2. 嵌套注释

.nav {
  // 导航栏基础样式
  display: flex;
  /* 子菜单项样式 */
  > li {
    padding: 5px;
  }
}

3. 变量/混合宏文档化

// 主题主色（用于按钮、标题等）
// @type: color
@primary-color: #1890ff;

// 生成圆形元素
// @param {number} @size - 直径
.circle(@size) {
  width: @size;
  height: @size;
  border-radius: 50%;
}

四、最佳实践

1. 代码组织

   /* ===============
      布局样式 
     =============== */
   .container {
     ...;
   }

2. 避免冗余

   // 错误示例（注释无意义）
   width: 100px; // 设置宽度为 100px

3. 团队规范

   • 统一使用 // 或 /* */ 风格。
   • 结合工具生成文档（如 StyleDocco）。

五、注意事项

• 编译配置：生产环境压缩工具（如 clean-css）默认移除注释（/*! 开头除外）。
• 特殊字符：注释中的 @ 符号需用引号包裹避免解析错误：

  /* 版本：v1.0.0 ("@2023") */ // 正确
  /* 版本：v1.0.0 (@2023) */ // 可能引发警告

通过合理使用注释，可以显著提升代码的可读性和协作效率！🚀

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24