不能直接替换left/right，因SCSS编译器不理解方向语义，left/right仅为字符串，全局替换易遗漏background-position、第三方类名等，且硬编码值无法响应运行时dir属性变化；应优先使用margin-inline-start等原生逻辑属性，辅以rtl-val()函数处理Safari 14以下等不支持场景。
为什么不能直接替换 left/right？
SCSS 编译器不理解方向语义，left 和 right 是纯字符串值。全局搜索替换不仅容易漏掉 background-position: right top、margin-inline-end 甚至第三方库里的类名，还会让样式失去对运行时 dir 属性的响应能力——比如用户切换语言后，硬编码的 margin-right: 16px 依然生效，布局错乱。
用 rtl-val() 函数做编译时方向判断
定义一个顶层变量 $dir，再配一个函数，在关键属性上动态返回 LTR/RTL 值：
@function rtl-val($ltr, $rtl) {
@if $dir == 'rtl' {
@return $rtl;
} @else {
@return $ltr;
}
}
.example {
margin-left: rtl-val(16px, 0);
margin-right: rtl-val(0, 16px);
text-align: rtl-val(left, right);
}
-
$dir必须在入口 SCSS 文件中统一定义（如$dir: ltr），构建时可通过环境变量注入，避免手动改值 - 别把
rtl-val()当万能胶——优先改用margin-inline-start等逻辑属性，它们原生响应dir，无需函数包裹 - 慎用
float：它没有逻辑等价物，必须写成float: rtl-val(left, right)；更推荐用display: flex重构
图标和背景图怎么翻转？
SVG 内联图标、箭头类 background-image 不会随 dir 自动镜像，必须显式处理：
.icon-arrow {
transform: scaleX(rtl-val(1, -1));
}
.btn::before {
background-image: url(rtl-val('arrow-l.svg', 'arrow-r.svg'));
}
-
transform: scaleX(-1)翻转干净，但如果图标含文字，需在子元素里重置transform: scaleX(1) -
url()必须包裹rtl-val()返回值，否则 Sass 编译报错：Invalid CSS after "url(rtl-val(" - 字体图标（如 Font Awesome）建议用现成的
fa-flip-horizontal类，别在 SCSS 里硬编码路径
哪些地方逻辑属性不可靠？
margin-inline-start 在 Safari 14 以下和部分旧 WebView 中行为异常，且无法优雅降级。同理，@supports (margin-inline-start: 0) 也救不了——旧引擎根本不识别该属性，也不会 fallback 到 margin-left。
立即学习“前端免费学习笔记（深入）”；
真正需要硬编码方向的地方，比如表单控件对齐、弹窗定位、第三方组件适配，仍得靠 rtl-val() + 显式类名控制。不要指望一套 CSS 能通吃所有浏览器和组件。
