SCSS中实现RTL布局需用全局不可重声明的$lang-dir变量配合rtl-val()函数统一处理方向属性，避免硬编码left/right、依赖direction或逻辑属性，图标、SVG、字体图标等非CSS属性也须翻转。
直接在 SCSS 里用 direction: rtl 不足以翻转布局——它只影响文本流，对 margin-left、float、background-position 这些物理属性完全无效，硬编码 left/right 更会导致漏翻、错位、第三方组件失联。
用顶层 $lang-dir 变量 + @if 控制方向输出
所有方向判断必须基于一个全局、不可重声明的变量，编译时一次性决定规则走向：
-
$lang-dir必须定义在入口文件（如_variables.scss）最顶部，不能嵌套在@media或选择器内，否则后续@if $lang-dir == rtl全部失效 - 避免写
text-align: if($lang-dir == rtl, right, left)这类重复判断，应封装成函数：@function rtl-val($ltr, $rtl) { @if $lang-dir == rtl { @return $rtl; } @else { @return $ltr; } } - 关键属性必须逐个处理：
float、margin、padding、border、background-position都得显式调用rtl-val()，不能指望浏览器自动响应direction
别碰 margin-inline-start —— 兼容性坑太深
虽然它是 CSS 原生逻辑属性，但 Safari 14 及更早版本、多数旧 Android WebView 对 margin-inline-start 的解析不一致，且无法优雅降级（不会 fallback 到 margin-left）：
- 用
@mixin rtl-margin($val)封装物理属性翻转，比依赖运行时逻辑属性更可控@mixin rtl-margin($val) { margin-left: if($lang-dir == rtl, $val, 0); margin-right: if($lang-dir == rtl, 0, $val); } -
float没有逻辑等价物，必须用float: rtl-val(left, right)；但更推荐直接重构为display: flex，避开方向陷阱 - 图标翻转优先用
transform: scaleX(rtl-val(1, -1))，但注意子元素含文字时需重置：& > * { transform: scaleX(rtl-val(1, -1)); }
多语言打包时，按语言拆文件，别塞 @if $lang == "ar"
一个 SCSS 文件里混写多个 @if $lang == "ar" / @if $lang == "he" 分支，会导致未使用规则仍被编译进最终 CSS，体积膨胀且干扰调试：
立即学习“前端免费学习笔记（深入）”；
- 正确做法是：为每种 RTL 语言建独立入口（如
ar.scss、he.scss），各自定义$lang-dir: rtl，再@import公共样式 - 若需复用同一套方向逻辑，用 SCSS 函数生成组合选择器：
@function rtl-langs() { @return ":is(:lang(ar), :lang(he), :lang(fa))"; } #{$rtl-langs()} .header { text-align: rtl-val(left, right); } - 构建时通过环境变量注入
$lang-dir（如 Webpack 的DefinePlugin），避免手动改文件
最易被忽略的是：SVG 内联图标、background-image 路径、字体图标 class 名（如 fa-chevron-left）这些“非 CSS 属性”也得走 rtl-val() 处理，否则镜像永远缺一角。
