CSS与LESS互转

两种方向做的是不同的事

同一个双向入口对应两条并不对称的处理路径。选择 LESS → CSS 时，输入会按 LESS 语法编译：变量被代入，混入的声明被展开，嵌套选择器被摊平成普通选择器，颜色函数与可计算表达式得到结果。选择 CSS → LESS 时，原 CSS 文本保持不变，因为标准 CSS 可以直接作为 LESS 源码；这里不会猜测哪些颜色应提取成变量，也不会自动把重复选择器改写为嵌套结构。

变量、嵌套和混入会怎样展开

LESS 变量以 @name 形式参与编译，它与浏览器运行时可读取的 CSS 自定义属性 --name 不是同一概念。编译后，普通 LESS 变量通常由具体值替代，变量声明本身不会自动变成 --name。混入会把匹配的声明写入调用位置；嵌套规则会组合父子选择器，父选择器引用 & 常用于 :hover 等状态。由此生成的 CSS 保留最终样式语义，却通常不能唯一还原原先的变量名、混入边界或嵌套组织。

输入与输出都是代码文本，不包含项目目录、构建配置或多个文件的上下文。判断结果是否可用，应关注编译后的选择器、属性值、规则顺序和资源路径，而不是期待两边文本逐行对应。

语法依据与核验资料

从 CSS 建立 LESS 文件

1. 确认方向

   方向按钮显示 CSS → LESS 后，把完整 CSS 粘贴到输入区；也可先点“载入示例”观察输入格式。

2. 生成可编辑起点

   点击“转为 LESS”。右侧会保留原 CSS 的选择器、声明、缩进和注释文本，不会自动制造 @ 变量、混入或嵌套。

3. 按项目语义重构

   可将反复出现且确实代表同一设计含义的值提取为变量，再把明确属于同一组件的状态选择器改写为 &:hover 等嵌套形式。不要仅因值相同就合并：两个当前相同的颜色可能承担不同角色。

4. 反向编译核对

   先复制右侧内容并完成手工修改，再切换为 LESS → CSS 编译。比较新旧 CSS 的选择器、规则顺序和页面效果，确认重构没有改变预期层叠。

把 LESS 编译为可复制的 CSS

1. 切换输入语言

   点方向按钮直到左侧为 LESS、右侧为 CSS。若刚完成另一方向，切换会把当前输出移到输入区并清空旧输出。

2. 粘贴自包含源码

   输入本次编译所需的变量、混入和规则。页面没有项目根目录或依赖文件选择器，依赖其他文件的代码应先整理成可解析的输入。

3. 执行并读取错误

   点击“转为 CSS”。若没有结果并出现错误信息，优先检查未闭合的大括号、未定义变量、拼错的混入调用以及无法取得的导入文件。

4. 复制并验证

   结果生成后使用输出区的复制按钮。把 CSS 放入目标页面或测试构建中核对，因为语法成功只说明完成编译，不等于层叠顺序、资源地址和视觉表现都符合项目预期。

可复现的变量与悬停样例

可把下面的 LESS 放入左侧：

@primary: #1890ff;
@radius: 4px;
.button {
  color: #fff;
  background: @primary;
  border-radius: @radius;
  &:hover { background: darken(@primary, 8%); }
}

转换结果会把变量和嵌套展开：

.button {
  color: #fff;
  background: #1890ff;
  border-radius: 4px;
}
.button:hover {
  background: #007cee;
}

这个例子同时说明三件事：@primary 没有变成 CSS 自定义属性，&:hover 被组合为完整选择器，darken() 得到颜色值。作为对照，把这段输出再走 CSS → LESS，文本会原样作为 LESS 起点，而不会自动恢复 @primary、@radius 或嵌套结构。

转换结果常见疑问

复制结果前要检查什么

这里适合处理可独立解析的代码片段和进行语法对照，不代替项目级构建、兼容性测试或代码审查。

• 没有压缩与源码映射选项：输出是可读 CSS 文本，页面不提供压缩开关、源码映射或文件下载。生产发布所需的压缩、前缀补全和映射文件应交给项目构建流程。
• 相对资源地址可能失去原上下文：url(...) 和导入路径与原文件位置有关。把结果复制到新目录后，应重新核对字体、图片和其他资源的实际地址。
• 编译不是可逆重构：LESS → CSS 会消除许多源码组织信息，之后再走 CSS → LESS 也无法恢复原变量名、混入定义或文件拆分方式。
• 复杂或较新的 CSS 语法要实测：预处理器解析器与浏览器原生 CSS 解析并非完全等价，特殊 hack、插件语法或新语法可能报错或需要项目配置。发布前应在目标浏览器与实际构建链中复核。
• 层叠结果仍由使用者判断：即使输出语法有效，选择器特异性、规则顺序、媒体条件和 !important 仍可能改变页面表现。应结合真实 DOM 与样式覆盖关系测试。