css变量无法动态控制direction，因direction需在dom解析早期由html的dir属性声明，且涉及unicode双向算法初始化；正确做法是用html dir属性配合[dir="rtl"]选择器或sass编译时生成方向样式。
不能用 CSS 变量动态控制 direction 或 text-align 的值来切换语言方向——变量本身不触发浏览器的双向算法（UBA）或布局重排，且 direction 是继承性全局属性，必须由 HTML 根元素显式声明。
为什么 direction: var(--dir) 无效
很多人写 :root { --dir: rtl; }，再在 body 上写 direction: var(--dir)，发现阿拉伯语页面光标还是从左开始、Tab 顺序没翻转、Flex 主轴没变。根本原因有三个：
-
direction不是普通样式属性，它参与 Unicode 双向算法（UBA）初始化，必须在 DOM 解析早期就确定，CSS 变量求值太晚 - 浏览器只认
这种硬编码的根级dir属性，document.documentElement.dir = 'rtl'才生效，style.setProperty('--dir', 'rtl')完全不触发 UBA 重算 - 即使
direction值被变量“成功”设为rtl，unicode-bidi缺失时，混排文本（如 “files ٢٠٢٤”）仍会错位——变量解决不了这一层
正确做法：用 dir 属性 + [dir="rtl"] 选择器组合
方向逻辑必须下沉到 HTML 结构层，CSS 只负责响应。实操要点如下：
- 初始化时立刻设置
document.documentElement.dir = locale === 'ar' ? 'rtl' : 'ltr'，别等 DOMContentLoaded - 所有方向相关样式用
[dir="rtl"]前缀，例如：[dir="rtl"] .btn { text-align: right; }—— 注意这里写right是为了兼容旧浏览器，现代可写start - 避免嵌套过深的选择器，比如
[dir="rtl"] header nav ul li a，容易漏覆盖；推荐给关键组件加独立dir属性，如<nav dir="rtl"></nav> - 第三方组件若不响应
dir，需用[dir="rtl"] .third-party-component强制重写margin-left/padding-right等物理属性
Sass 编译时生成方向样式更可靠
运行时靠 JS 切换 dir 属性虽可行，但 SSR 场景下易闪动。Sass 提前编译能彻底规避竞态：
- 定义全局变量：
$lang-dir: ltr;或$lang-dir: rtl; - 用
@if控制输出：.title { text-align: if($lang-dir == rtl, right, left); } - 封装
@mixin处理盒模型：@mixin margin-start($val) { margin-#{$start}: $val; }，其中$start根据$lang-dir动态赋值为left或right - 关键点：Sass 输出的是静态 CSS，不存在变量求值时机问题，且文件体积可控——只生成实际需要的方向分支
最常被忽略的是：dir 属性必须设在 上， 不合法也不生效；而 direction: rtl 单独写在 CSS 里，最多影响对齐，改不了光标、Tab 流、Flex 主轴起点这些底层行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
