应使用$dir变量配合rtl-val()函数编译时动态生成，优先改用margin-inline-start等逻辑属性，并对图标、背景图等显式翻转。
直接用 left/right 写死物理方向，永远做不到“快速生成RTL镜像”——SCSS不识别语义，编译时无法感知 dir 变化，硬替换必然遗漏、不可维护。
用 rtl-val() 函数替代手写 [dir="rtl"] 覆盖
手动在每个规则后加 [dir="rtl"] { margin-right: 16px; } 是最慢的方式，且易漏、难维护。真正可复用的方案是定义一个编译期函数：
@function rtl-val($ltr, $rtl) { @if $dir == 'rtl' { @return $rtl; } @else { @return $ltr; } }-
$dir必须在入口 SCSS（如_variables.scss）中统一声明，例如$dir: ltr;或通过构建脚本注入环境变量 - 函数必须用于属性值内（如
margin-left: rtl-val(12px, 0);），不能用于选择器或变量赋值——否则编译时不会分支计算 - 避免对每个属性都调用：优先改用逻辑属性，
rtl-val()只用于遗留物理属性兜底
优先改用 CSS 逻辑属性，而非依赖 SCSS 函数
现代浏览器已全面支持 margin-inline-start、inset-inline-start 等逻辑属性，它们天然响应 dir 和 writing-mode，无需 SCSS 干预：
-
margin-left → margin-inline-start，padding-right → padding-inline-end，text-align: left → text-align: start position: absolute; left: 20px → inset-inline-start: 20px; top: 8px-
float: left → float: rtl-val(left, right)不推荐——float无逻辑等价物，应改用display: flex或grid - Safari 14.1+、Chrome 87+、Firefox 63+ 均支持
inset，旧版本回退到margin-inline-start
图标、背景图、伪元素需显式翻转
逻辑属性管不了 SVG、background-image 或 ::before 的视觉朝向，这些必须单独处理：
立即学习“前端免费学习笔记（深入）”；
-
.icon-arrow { transform: scaleX(rtl-val(1, -1)); }—— 注意：若图标含文字，需子元素重置transform: scaleX(1) -
background-image: url(rtl-val('arrow-l.svg', 'arrow-r.svg'));——url()必须包裹，否则编译报错Invalid CSS after "url(rtl-val(" -
::before { inset-inline-start: 50%; }替代left: 50%，再配合transform: scaleX(rtl-val(1, -1))翻转箭头本身 - 字体图标（如 Font Awesome）用
fa-flip-horizontal类控制，别在 SCSS 里硬编码路径或content
别试图构建时输出双份 CSS 文件
想同时生成 app-ltr.css 和 app-rtl.css 是典型误区——SCSS 不支持运行时条件编译，常见错误是用 @import 分支引入不同文件：
- 会导致重复编译、变量污染、source map 错乱
- 同一组件在两份 CSS 中被编译两次，体积膨胀且难以调试
- 真正轻量的做法：一份 CSS + 一个
$dir变量 + 构建时注入（如 Webpack DefinePlugin 或 Vite define） - 若必须输出双版本，应由构建工具（如 PostCSS 插件）在 CSS 层做物理属性重写，而非 SCSS 层硬分叉
最易被忽略的点是：所有逻辑属性和 rtl-val() 都依赖 HTML 根节点是否设置了 dir="rtl"。没这个属性，:dir(rtl) 不匹配，inset-inline-start 也只按 LTR 解释——样式再完美，HTML 没配对，照样白搭。
