Less不支持运行时RTL切换，必须编译期确定；正确做法是用@dir变量配合.when守卫mixin分别定义LTR/RTL规则（如padding-left/right），并严格依赖HTML的dir属性生效，否则样式不翻转。
Less 本身不支持运行时 RTL 切换，所有方向逻辑必须在编译期确定；真正可行的路径是：用 @dir 变量 + .when 条件 mixin 封装方向规则，并严格配合 HTML 的 dir 属性生效——否则样式不会自动翻转，也别指望它响应 direction: rtl。
用 .when 混合封装方向感知规则，而不是拼接属性名
Less 没有 if() 函数（那是 Sass 的），但支持带守卫条件的 mixin（.name(...) when (...)）。你不能写 margin-@{dir}——CSS 不认这种动态拼接，margin-rtl 是非法属性名。
正确做法是把方向映射为具体值，再注入到物理属性中：
.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); .text-align();。注意：
立即学习“前端免费学习笔记（深入）”；
- 每个分支必须写出完整 CSS 属性，单位和值不能省略
- 若
@dir未定义或值非法（如ltrr），两个.when都不匹配，样式不会输出——这比静默 fallback 更安全 - 不要在
@each循环里套.when，Less 不支持嵌套条件判断
入口文件分 LTR/RTL 两套，避免 @import (multiple) 陷阱
@import (multiple) 并不重置变量作用域。即使你先写 @dir: ltr; 再 @import "shared.less"，然后又写 @dir: rtl; 再 import 一次，第二次仍读取第一次定义的 @dir 值。
更实际、稳定的做法是拆成两个独立入口：
// ltr.less @dir: ltr; @import "shared.less"; // rtl.less @dir: rtl; @import "shared.less";
构建时分别编译出 app-ltr.css 和 app-rtl.css，前端根据 document.documentElement.dir 加载对应文件。这是目前兼容性最好、最可控的方式。
为什么不能只靠 dir="rtl" 或 direction: rtl
仅在 上设属性只是触发点，不是终点。它不会让 margin-left 自动变成“右边距”，也不会翻转 background-position: left top 或 SVG 图标方向。
关键事实：
-
margin-left/padding-right等物理属性完全无视dir，必须显式替换为margin-inline-start/padding-inline-end -
float: left没有逻辑等价物，只能用float: rtl-val(left, right)（SCSS）或.float-start()mixin（Less），但更推荐用display: flex重构 - 图标、箭头、背景图路径等需单独处理：
transform: scaleX(-1)适用于纯装饰性 SVG，但含文字的图标需重置子元素transform
逻辑属性（margin-inline-start、text-align: start）已在 Chrome 87+、Firefox 89+、Safari 15.4+、Edge 79+ 原生支持，是长期解法；但旧版 Safari 仍需搭配 [dir="rtl"] 选择器降级。
复杂点在于混合内容与语义翻转，不是简单左右对调
RTL 不是镜像截图，而是语义重排。比如返回按钮在 RTL 界面里应指向右侧（书写起点），而非机械翻转箭头；URL 或版本号 v2.4.1 在混合文本中会乱序，必须用 <bdi></bdi> 包裹才能触发 Unicode 双向算法。
最容易被忽略的是：lang 必须同步设置——。漏掉 lang，数字显示为西方格式（123 而非 ١٢٣），连字不生效，屏幕阅读器朗读错误。这不是样式问题，是浏览器底层行为开关。
