当body设置dir=rtl时如何覆盖SCSS变量$FONT_REGULAR的取值

失效原因 #

SCSS 是预处理语言，所有$开头的 SCSS 变量会在编译阶段完成值替换，最终输出的 CSS 中不会保留 SCSS 变量的定义。你写在body[dir='rtl']作用域内的变量覆写逻辑，只会影响该作用域内编译阶段确定的样式，无法在运行时根据页面dir属性动态修改已经编译完成的其他组件的字体取值。

推荐解决方案：使用 CSS 原生自定义属性 #

原生 CSS 变量是运行时生效的，会随 DOM 属性变化动态更新，无需修改原有组件的变量引用逻辑，改造成本极低：

// 全局根作用域定义默认字体（对应LTR场景）
:root {
  --font-regular: "Roboto-Regular";
}
// RTL 场景覆写原生变量取值
body[dir='rtl'] {
  --font-regular: "FSAlbertArabicWeb-Regular";
}
// 兼容原有SCSS变量的使用习惯
$FONT_REGULAR: var(--font-regular);

调整完成后，你所有组件中已有的$FONT_REGULAR引用不需要做任何修改，编译后会自动解析为var(--font-regular)，运行时会根据当前页面的dir属性自动匹配对应字体。

兼容老旧浏览器的备选方案 #

如果你的项目需要兼容不支持 CSS 原生变量的老旧浏览器（如IE11），可以用 SCSS 混合器批量生成 RTL 专属样式：

// 全局定义RTL混合器
@mixin rtl {
  body[dir='rtl'] & {
    @content;
  }
}

// 组件内使用示例
.example-component {
  font-family: $FONT_REGULAR;
  // 单独覆写RTL场景的字体
  @include rtl {
    font-family: "FSAlbertArabicWeb-Regular";
  }
}

该方案需要修改所有用到$FONT_REGULAR的组件样式，改造成本较高，仅建议有强兼容需求时使用。

内容的提问来源于stack exchange，提问作者Vinay K