Less无法运行时切换LTR/RTL，必须编译期固化；可行方案是用@dir变量配合.when条件mixin封装方向规则，并依赖HTML的dir属性生效，适用于构建时分发多套CSS的场景。
Less 本身无法在运行时切换 LTR/RTL，所有方向逻辑必须在编译期固化；真正可维护的方案是：用 @dir 变量 + .when 条件 mixin 封装方向敏感规则，并配合 HTML 的 dir 属性生效——但要注意，它只适用于构建时确定方向的场景（如按语言分发两套 CSS），不支持单页内动态切换。
用 .when mixin 替代 @if 控制方向分支
Less 没有 @if 函数，也不能拼接属性名（比如写 margin-@{dir} 是非法的）。必须为每个方向显式定义完整规则：
-
.pad-start(@size)when (@dir= ltr) {padding-left: @size; } -
.pad-start(@size)when (@dir= rtl) {padding-right: @size; } -
.text-align()when (@dir= ltr) {text-align: left; } -
.text-align()when (@dir= rtl) {text-align: right; }
调用时直接写 .pad-start(12px)，Less 会自动匹配对应分支。若 @dir 未定义或值非法（如 ltrr），两个 .when 都不触发，样式不会输出——这比静默 fallback 更安全，也更容易暴露配置问题。
避免用 @import (multiple) 多次加载同一文件
很多人想在一个文件里反复改 @dir 再 @import，但 @import (multiple) 不重置变量作用域。第二次导入仍读取第一次定义的 @dir 值。
正确做法是拆成两个入口文件：
-
ltr.less：第一行写@dir: ltr;，再@import "shared.less"; -
rtl.less：第一行写@dir: rtl;，再@import "shared.less";
构建时分别编译出 ltr.css 和 rtl.css，前端根据 document.documentElement.dir 加载对应文件。这是目前兼容性最好、最可控的方式。
为什么不能只靠 direction: rtl 自动翻转布局
direction: rtl 只影响部分逻辑属性：它会让 text-align: start 对齐到右端，margin-left 视觉上出现在右边，flex-direction: row 主轴反向——但它完全不改变 background-position: left top、border-radius: 4px 0 0 4px、transform: translateX(-10px) 这些物理属性的行为。
常见错误包括：
- 图标仍用
fa-arrow-left，但在 RTL 界面中语义应为“返回起点”，实际需指向右侧 -
padding-left在 RTL 下依然撑开左侧空白，视觉错位 - 自定义
clip-path或mask完全不响应direction
这些必须靠 dir class 切换、JS 检测或改用逻辑属性（如 padding-inline-start）来处理。
Less 方案的边界在哪
Less 编译结果是静态 CSS，它解决不了运行时方向切换、SVG 图标语义翻转、或 border-top-left-radius 这类无标准逻辑别名的属性。这些地方要么得手写 [dir="rtl"] .btn { border-top-right-radius: 4px; }，要么转向 CSS 逻辑属性（border-start-start-radius 尚未被规范支持）。真正长期解法是逐步迁移到 margin-inline-start、inset-inline-end 等原生逻辑属性——它们由浏览器运行时解析，与 dir 属性联动，无需预编译，也无需维护多套样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
