推荐用Sass变量$ lang-dir统一控制方向逻辑，配合@if和@mixin自动翻转direction、text-align及margin/padding等物理属性，确保编译时精准输出、避免运行时闪动与兼容性问题。
如何用Sass变量控制direction和text-align
直接改direction属性就能切LTR/RTL，但硬编码在每个选择器里会重复、难维护。Sass变量的核心作用是把方向逻辑抽出来，让样式表“知道当前语言要怎么排”。
推荐定义一个顶层变量：$lang-dir: ltr（或rtl），再用@if按需生成规则：
$lang-dir: rtl;
.example {
direction: $lang-dir;
text-align: if($lang-dir == rtl, right, left);
}
注意if()是Sass内置函数，不是CSS原生的；它只在编译时起作用，不会输出冗余CSS。
为什么不能只靠[dir="rtl"]选择器做全局切换
纯CSS方案（比如给html[dir="rtl"]加规则）看似简洁，但实际项目中常遇到三类问题：
- 第三方组件不响应
dir属性，比如某些弹窗、日期选择器内部写死了left: 0 - 需要覆盖深层嵌套的
margin-left/padding-right等，用[dir="rtl"] .foo .bar写法容易漏、难定位 - 服务端渲染（SSR）场景下，
dir属性可能晚于CSS加载，造成闪动
用Sass变量+编译时生成，能确保所有方向相关样式从一开始就匹配目标语言，避免运行时竞态。
margin/padding这类物理属性怎么自动翻转
不能只靠direction——它不影响盒模型。必须显式翻转左右值。Sass里最稳妥的做法是封装一个混合宏：
@mixin rtl-margin($val) {
margin-left: if($lang-dir == rtl, $val, 0);
margin-right: if($lang-dir == rtl, 0, $val);
}
调用时：@include rtl-margin(16px)，生成对应方向的边距。比手写margin-inline-start更兼容（IE11不支持inline-start）。
关键点：别试图用margin-inline替代——它在Safari旧版本和部分Android WebView里行为不一致，且无法降级到margin-left/right。
多语言打包时如何避免CSS体积膨胀
如果为每种语言单独编译一份CSS（比如app-ltr.css + app-rtl.css），文件体积会翻倍。但混在一个文件里又怕冗余：
- 不要用
@media (forced-colors: active)这类无关特性做条件编译 - 用
map-get($direction-map, $lang)配合@each批量生成，但仅限真正需要差异化的组件 - 对通用样式（如字体、颜色）完全不参与方向逻辑，避免无谓分支
最易被忽略的是：float几乎没人用了，但若遗留代码里还有，必须同样用变量控制，否则RTL下会彻底错位——它不受direction影响。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
