必须用 sass 变量在编译时生成精准匹配目标语言的 css，因[dir="rtl"]无法解决深层嵌套物理属性翻转、第三方组件硬编码、ssr闪动三类问题。
不能靠 [dir="rtl"] 选择器“全局覆盖”就完事——它解决不了深层嵌套的物理属性翻转、第三方组件硬编码、服务端渲染闪动这三类真实问题。必须用 Sass 变量在编译时生成精准匹配目标语言的 CSS。
为什么 [dir="rtl"] 选择器在项目中常失效
它看起来简洁，但实际落地时漏洞明显：
- 第三方 UI 库（如 Ant Design 旧版、Bootstrap 4）内部写死
left: 0或margin-left，根本不会响应[dir="rtl"] - 要覆盖深层结构（比如
.modal .dropdown-menu .item），得写一长串选择器，漏一个层级就错位 - SSR 场景下，HTML 中的
dir属性可能比 CSS 晚加载几十毫秒，导致页面先按 LTR 渲染再跳变，用户肉眼可见“闪动”
这些都不是样式没生效，而是逻辑没对齐——[dir="rtl"] 是运行时条件，而方向适配本质是编译期决策。
$lang-dir 变量如何控制 direction 和 text-align
直接定义顶层变量，再用 Sass 内置 if() 函数做编译时分支：
$lang-dir: rtl;
.example {
direction: $lang-dir;
text-align: if($lang-dir == rtl, right, left);
}
注意两点：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
if()是 Sass 编译函数，不是 CSS 原生语法，只在构建时执行，输出结果里没有冗余判断逻辑 - 别写成
text-align: if($lang-dir == rtl, start, end)——start/end在 IE11 和部分 Android WebView 中不被支持，兼容性断层
如何安全翻转 margin、padding 这类物理属性
direction 不影响盒模型，必须显式交换左右值。推荐封装为 @mixin：
@mixin rtl-margin($val) {
margin-left: if($lang-dir == rtl, $val, 0);
margin-right: if($lang-dir == rtl, 0, $val);
}
.card { @include rtl-margin(16px); }
关键点：
- 不要用
margin-inline-start替代——它在 Safari 14 以下和某些旧版 WebView 中行为异常，且无法优雅降级 - 如果项目里还残留
float: left，同样得用变量控制：float: if($lang-dir == rtl, right, left)，否则 RTL 下彻底错位
多语言打包时怎么避免 CSS 体积翻倍
别为每种语言单独编译一份 CSS（如 app-ltr.css + app-rtl.css），更别把所有规则都塞进一个文件里靠 @if 包裹——那样会产出大量未使用的 CSS。
务实做法是：
- 只对真正需要方向差异的组件（如导航、表单、弹窗）启用
@if $lang-dir == rtl分支 - 字体、颜色、圆角等通用样式完全不参与方向逻辑，避免无谓分支
- 用
map-get($typography-map, $lang)配合@each批量生成文本排版规则，但仅限中文、日文、阿拉伯文等有显著差异的语言
最容易被忽略的是：Sass 编译时无法感知运行时语言切换，所以如果你依赖 JS 动态改 document.documentElement.dir，那这套方案就不适用——它只适合构建时确定语言的场景（如 Nuxt 的 nuxt-i18n 静态生成、Next.js 的 generateStaticParams）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
