直接替换left/right会出错，因scss不识别方向语义，硬编码易遗漏且无法响应direction变化；应使用$dir变量配合rtl-val()函数编译时动态生成，优先改用margin-inline-start等逻辑属性，并对图标、背景图等显式翻转。
为什么直接替换 left/right 会出错
SCSS 本身不识别方向语义，left 和 right 是硬编码值，手动全局替换极易遗漏（比如在 background-position、margin-inline-start 或第三方库 class 中），且无法响应运行时 direction 变化。更关键的是：CSS 逻辑属性（如 margin-inline-start）已原生支持 RTL/LTR，但老项目大量使用物理属性，需要低成本渐进改造。
dir 变量 + if() 混合宏是最快落地方式
用一个顶层 $dir 变量控制方向，在关键位置用 @function 返回对应值，比写两套样式更轻量。注意必须用函数而非变量赋值，否则编译时无法动态计算：
@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或$dir: rtl），构建时通过环境变量注入更佳 - 避免对每个属性都手写
rtl-val()，优先改用逻辑属性：margin-inline-start替代margin-left - 慎用
float—— 它没有逻辑等价物，必须用float: rtl-val(left, right)，但更推荐用display: flex重构
自动翻转图标和背景图需额外处理
SVG 内联图标、background-image 的箭头、分割线等不会随 direction 自动镜像，必须显式翻转：
.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)） - 路径字符串不能直接用
rtl-val()，需配合url()函数包裹，否则编译报错Invalid CSS after "...url(rtl-val(" - 字体图标（如 Font Awesome）建议用
fa-flip-horizontal类控制，而非在 SCSS 里硬编码
构建时生成双版本 CSS 的坑
有些团队想同时输出 app-ltr.css 和 app-rtl.css，但 SCSS 不支持运行时条件编译。常见错误是用 @import 分支引入不同文件 —— 这会导致重复编译、变量污染、source map 错乱：
- 正确做法：用构建工具（如 Webpack 的
DefinePlugin或 Vite 的define）注入$dir值，分别跑两次编译 - 不要在同一个编译流程中试图“切换”
$dir，SCSS 变量不可重赋值 - RTL 版本的
:dir(rtl)伪类选择器兼容性有限（Chrome 87+，Firefox 90+），生产环境仍需靠 class 控制（如html[dir="rtl"]）
真正难的不是翻转本身，而是判断哪些地方该用逻辑属性、哪些必须保留物理属性加函数兜底——尤其当项目混用 CSS-in-JS、Tailwind 和原生 SCSS 时，边界容易模糊。保持一份 rtl-safe.scss 清单，只对明确需要翻转的模块启用策略，比全量自动化更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
