直接用$dir变量+rtl-val()函数是最轻量可控方案，因逻辑属性无法自动翻转float、background-position、SVG图标等物理硬编码；rtl-val()在编译时映射方向值，避免运行时干预和双CSS文件维护成本。
直接用 $dir 变量 + rtl-val() 函数是最轻量、最可控的方案，比生成双 CSS 文件或硬写 [dir="rtl"] 覆盖更可靠，也比纯逻辑属性迁移更兼容老项目。
为什么不能只靠 CSS 逻辑属性自动适配
逻辑属性（如 margin-inline-start）确实原生支持方向切换，但实际项目里大量存在物理属性硬编码：第三方组件用 float: left、背景图路径写死 url('arrow-left.svg')、background-position: left top 等。这些不会随 direction 或 :dir(rtl) 自动翻转——浏览器不理解语义，只认字面值。
-
float: left没有逻辑等价物，必须显式处理 -
background-position: left不会被:dir(rtl)改变，它始终解析为物理左边缘 - 图标、箭头类 SVG 或 PNG 资源需手动镜像或替换，否则在 RTL 下指向错误
如何用 rtl-val() 函数做编译时方向映射
核心是把方向判断提前到 SCSS 编译阶段，用一个顶层变量控制输出结果，避免运行时 JS 干预或重复 CSS 规则。
- 在入口文件定义
$dir: ltr（构建时可通过环境变量覆盖为rtl） - 声明函数：
@function rtl-val($ltr, $rtl) { @if $dir == 'rtl' { @return $rtl; } @else { @return $ltr; } } - 使用时直接套：
margin-left: rtl-val(16px, 0);、text-align: rtl-val(left, right); - 注意：不能用于
@each循环中动态生成属性名（如margin-#{$side}），因为$side是字符串拼接，rtl-val()无法介入
哪些地方必须额外手动处理
rtl-val() 解决不了所有问题，这几类必须单独应对：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
-
transform 镜像：用
transform: scaleX(rtl-val(1, -1))翻转图标，但若子元素含文字，得加* { transform: scaleX(1); }重置 -
URL 资源路径：不能直接
url(rtl-val('l.svg', 'r.svg'))，会报错Invalid CSS after "url(rtl-val("；必须写成url('#{rtl-val('l.svg', 'r.svg')}') -
字体图标：优先用 class 控制（如
fa-flip-horizontal），别在 SCSS 里写content: "\f0da";然后试图翻转 Unicode -
float：没有逻辑替代项，只能
float: rtl-val(left, right)，但更推荐重构为display: flex或inset-inline-start
别踩“构建双版本 CSS”的坑
有人想让 SCSS 同时输出 app-ltr.css 和 app-rtl.css，典型错误是用 @import 分支引入不同文件，比如：
@if $dir == 'rtl' {
@import 'rtl-overrides';
} @else {
@import 'ltr-base';
}这会导致变量污染、@mixin 重复定义、source map 错乱，且无法共用同一套基础样式。真正可靠的方案只有一个：单入口、单变量、单编译流程，靠 rtl-val() 在同一份 CSS 中产出方向敏感值。
最易被忽略的是 background-image 路径和 transform 的字符串插值语法——写错一个 #{} 就编译失败，而这类错误往往只在 RTL 构建时暴露。
