根据javascript条件切换sass类

【问题标题】：Switch the sass class based on javascript condition根据javascript条件切换sass类
【发布时间】：2018-09-18 06:24:16
【问题描述】：

我有两个不同国家的门户网站。每个国家都有不同的 UX（小的 CSS 变化，如填充、颜色、字体）设计。有更多国家在排队。

我想通过 javascript 说出国家名称，然后根据从 javascript 传递的值，然后 Sass（SCSS 类）应该表现。基本上我想根据国家名称使用 SASS 变量文件。

有可能吗，你能给我一些想法吗？

谢谢！！！

【问题讨论】：

为每个国家添加一个 CSS 类并在选择器中使用。
嗯？阅读How to Ask 并创建一个minimal reproducible example
@SLaks ，你的意思是 ng-class in html 吗？我将拥有更多国家/地区

标签： javascript html css angularjs sass

【解决方案1】：

无法使用基于 JS 的 SASS 变量。 SASS 先编译成 CSS，因此不受 JS 影响。

您可以做的是为 body 或一些高级 div 创建一组 CSS 类，这将影响嵌套 css 的某些元素。

这是一个通用示例，因为我不知道您的 CSS 是什么样的：

body {
  font-family: "Arial";
  color: black;
  table { border-color: red; }

  &.germany {
     color: red;
     table {border-color: yellow;}

  }
  &.namibia {
     color: green;
     table {border-color: pink;}

  }

}

在这种情况下，我会要求JS将germany或namibia类添加到HTML body中，并应用相应的样式。

【讨论】：