真正可行的方案是用编译时逻辑控制方向输出，而非运行时hack；通过顶层$dir变量和rtl-val()函数统一计算方向值，优先迁移到css逻辑属性如margin-inline-start、text-align:start/end，避免硬编码物理属性或滥用@if分支。
直接在 SCSS 里写 margin-left 和 margin-right 并手动替换，一定会漏、会错、会和第三方组件打架——真正可行的方案是用编译时逻辑控制方向输出，而不是靠运行时 JS 或 CSS 层 hack。
用顶层 $dir 变量 + rtl-val() 函数统一控制
所有方向相关属性必须通过一个函数动态计算，避免硬编码分支。函数比 @if 块更易复用，也防止嵌套中变量作用域污染。
-
$dir必须定义在入口文件（如main.scss）最顶部，且不能被重声明；推荐通过构建环境变量注入，比如 Webpack 的DefinePlugin或 Vite 的define -
rtl-val($ltr, $rtl)是最小可用单元：它不生成多余 CSS，只在编译时返回对应值 - 不要用
@mixin rtl-margin($val)封装每个属性——它会导致重复代码膨胀；优先改用逻辑属性，rtl-val()是给老项目兜底的
示例：
@function rtl-val($ltr, $rtl) {
@if $dir == 'rtl' {
@return $rtl;
}
@else {
@return $ltr;
}
}
.example {
margin-inline-start: rtl-val(16px, 16px); // 逻辑属性，可直接用
text-align: rtl-val(left, right);
float: rtl-val(left, right); // float 没有逻辑等价物，必须显式控制
}
优先迁移到 CSS 逻辑属性，而非翻转物理属性
margin-inline-start 在 LTR/RTL 下自动映射到 margin-left/margin-right，浏览器支持已覆盖 Safari 15.4+、Chrome 87+、Firefox 63+。旧版 WebView 问题可通过 Autoprefixer 补全，比手写 if 更可靠。
- 能用
margin-inline-start就别用rtl-val(margin-left, margin-right)—— 后者多一层抽象，且无法利用浏览器原生 direction 响应 -
text-align: start/end替代left/right，语义清晰，无需 Sass 干预 -
float: start/end在现代浏览器中已支持，但注意 Safari 16.4 之前不支持float: end，需降级为rtl-val(float: left, float: right) - 慎用
transform: scaleX(-1)翻转图标：它会镜像子元素文字，若图标含文本需额外重置transform: scaleX(1)
避免 @extend 和全局 % 占位符做 RTL 复用
%align-right 这类占位符在 RTL 编译下仍是 text-align: right，完全违背语义。SCSS 的 @extend 不感知上下文方向，只会把规则原样复制过去。
- 所有方向相关样式必须绑定到具体选择器或
.layout-rtl &这类上下文类，不能靠继承传播 - 若用 Bootstrap，确保加载的是
bootstrap.rtl.min.css，而非仅加dir="rtl"—— 默认 CSS 完全不响应该属性 - 自定义组件中，不要在
:lang(ar)里定义 CSS 变量再让子元素继承；变量不会穿透伪元素，要写成:lang(ar) { --spacing-xs: 4px; }并在根元素上生效 - 第三方组件（如日期选择器）大概率不响应
[dir="rtl"]，得单独 patch：.datepicker .prev { transform: translateX(rtl-val(-20px, 20px)); }
构建双版本 CSS（LTR/RTL）时的关键限制
SCSS 不支持运行时条件编译，所谓“一套源码输出两套 CSS”只能靠两次独立编译实现，每次传入不同 $dir 值。任何试图在单次编译中用 @if $lang == "ar" 分支的方式，都会把未使用规则打入最终 CSS，白占体积。
- 禁止在同一个 SCSS 文件里混写
@if $dir == "ltr" { ... } @else { ... }—— 这会让未命中分支的 CSS 仍被输出（除非你用!default和空值兜底） - 正确做法是拆两个入口文件：
main-ltr.scss（含$dir: ltr）和main-rtl.scss（含$dir: rtl），分别构建 - 若用
@use，确保变量命名空间隔离，比如@use 'abstracts/direction' as dir，避免@import引起的隐式覆盖 - 构建产物必须配对使用：
app-ltr.css+，app-rtl.css+；混用会导致方向冲突
最易被忽略的一点：HTML 的 dir 属性必须写死在初始 标签里，不能靠 JS 动态设置——部分旧版 Safari 不触发重绘，文字会挤在右侧却不动布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
