Less无法运行时切换LTR/RTL方向，必须在编译期通过@dir变量配合.when mixin生成合法物理属性；推荐优先使用CSS逻辑属性实现自动适配，但需兼顾IE及旧版Safari兼容性。
Less 本身无法在运行时切换 LTR/RTL 方向，所有方向逻辑必须在编译期固化；真正能“自动切换”的只有 CSS 逻辑属性（如 margin-inline-start）或配合 HTML 的 dir 属性 + CSS 变量驱动的方案。
用 .when mixin 封装方向分支，避免拼接非法属性名
Less 不支持 @if 或运行时字符串拼接（比如 margin-@{dir}），那样会生成 margin-rtl 这类非法 CSS 属性。必须把每个方向映射为完整、合法的物理属性声明：
.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); 即可。注意：@dir 必须在导入前明确定义，且值只能是 ltr 或 rtl ——若未定义或拼错（如 ltrr），两个 .when 都不匹配，样式完全不输出，这是安全设计，不是 bug。
不要依赖 @import (multiple) 多次导入同一文件
很多人试图这样写：
立即学习“前端免费学习笔记（深入）”；
@dir: ltr;<br>@import "shared.less";<br>@dir: rtl;<br>@import "shared.less";
这在 Less v4+ 中无效：变量作用域不会重置，第二次 @import 仍读取第一次定义的 @dir 值。可行做法是拆成两个入口文件：
-
ltr.less：只含@dir: ltr;+@import "shared.less"; -
rtl.less：只含@dir: rtl;+@import "shared.less";
构建时分别编译出两份 CSS，前端根据 document.documentElement.dir 动态加载对应文件。这是目前兼容性最好、行为最确定的方式。
用 CSS 逻辑属性替代 Less 方向变量才是长期解法
现代浏览器（Chrome 69+、Firefox 63+、Safari 15.4+、Edge 79+）已普遍支持 margin-inline-start、padding-inline-end、text-align: start 等逻辑属性。它们天然响应 dir 属性，无需预编译分支：
/* 一行搞定，无需 Less 条件 */<br>.content {<br> margin-inline-start: 12px;<br> text-align: start;<br>}只要确保 HTML 根元素有 <html dir="rtl">，这些样式就会自动适配。Less 在这里只负责写基础规则，不参与方向决策——这才是“自动切换”的本质来源。
真正容易被忽略的是：逻辑属性虽好，但 IE 完全不支持，且部分旧版 Safari 对 text-align: start/end 解析不稳定；如果项目还需兼容这些环境，.when + 双入口编译仍是唯一可靠路径。
