运行时修改CSS变量后，SCSS的@if条件判断失效求助

你遇到的核心问题是Sass预编译逻辑和CSS变量运行时逻辑的冲突：

• Sass的@if是在编译阶段执行的，此时$language的值就是字符串var(--lang)，不是浏览器运行时才会确定的ar或fr。
• 所以你的@if $language == 'ar'本质上是判断"var(--lang)" == "ar"，结果永远为false，自然不会生成对应的CSS规则。

下面提供三种可行的实现方式，都是利用运行时可识别的CSS条件来响应语言切换：

方案1：HTML lang属性 + 属性选择器 #

步骤1：修改JS代码，同步设置HTML的lang属性 #

let language = localStorage.getItem("lang"); // ar/fr
const root = document.documentElement;
// 设置HTML lang属性
root.setAttribute('lang', language);
// 保留CSS变量设置（用于content内容），注意给语言值加引号
root.style.setProperty('--lang', `'${language}'`);

步骤2：在Sass中用属性选择器编写条件样式 #

.element {
  content: var(--lang); // 正常显示语言值

  // 针对ar语言的样式
  [lang="ar"] & {
    background-color: aqua;
  }
  // 针对fr语言的样式
  [lang="fr"] & {
    background-color: red;
  }
}

方案2：根元素语言类 + 类选择器 #

步骤1：修改JS代码，给根元素添加语言类 #

let language = localStorage.getItem("lang"); // ar/fr
const root = document.querySelector(':root');
// 先移除旧的语言类，避免冲突
root.classList.remove('lang-ar', 'lang-fr');
// 添加当前语言对应的类
root.classList.add(`lang-${language}`);
// 保留CSS变量设置
root.style.setProperty('--lang', `'${language}'`);

步骤2：在Sass中用类选择器编写条件样式 #

.element {
  content: var(--lang);

  .lang-ar & {
    background-color: aqua;
  }
  .lang-fr & {
    background-color: red;
  }
}

方案3：CSS语言媒体查询 #

这种方式依赖HTML的lang属性，无需额外添加类，直接用CSS原生的语言媒体查询：

.element {
  content: var(--lang);
}

// 当语言为ar时生效
@media (lang: ar) {
  .element {
    background-color: aqua;
  }
}

// 当语言为fr时生效
@media (lang: fr) {
  .element {
    background-color: red;
  }
}

对应的JS代码只需设置HTML的lang属性即可：

let language = localStorage.getItem("lang");
document.documentElement.setAttribute('lang', language);

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