Css 根据主体类更改所有变量值

我正在进行基于主题的本地化。为此，我将为每一个本地化的body tag设置一个类。 我需要根据该类更改所有变量的值 为了更多的了解

$a: #000;
$b= Arial;

if body has class Australia then
$a: #ff0000;
$b: 'Roboto';

---

请不要使用仅由scss编写的js代码以下示例使用映射定义不同的主题值。mixin将把每个选择器包装在一个类（map键）中，并创建要在每个选择器中使用的全局变量

$theme-map:(
  '.australia': (color: blue, font-family: Roboto),
  '.denmark'  : (color: red,  font-family: Arial)    
);


@mixin theme {
  @each $class, $map in $theme-map {
    #{$class} & { 
      $color:       map-get($map, color)       !global;
      $font-family: map-get($map, font-family) !global;
      @content;
    }
  }
}



.foo {
  @include theme {
    color: $color;
    font-family: $font-family;
  }
}


.bar{
  @include theme {
    background-color: $color;
  }
}

输出：

.australia .foo {
  color: blue;
  font-family: Roboto;
}
.denmark .foo {
  color: red;
  font-family: Arial;
}

.australia .bar {
  background-color: blue;
}
.denmark .bar {
  background-color: red;
}

在不久的将来，CSS变量将使用变量继承简化这类工作

.australia {
   --color: red;
   --font-family : Arial;
}

.denmark {
   --color: blue;
   --font-family : Roboto;
}



.foo {
   color: var(--color);
   font-family: var(--font-family);
}

.bar {
   backgound-color: var(--color);
}

---

使用@import和！默认变量

// –––––––––––––––––––––––––––––––––––––– 
// _style.scss 
// underscore added to prevent compilation 
// ––––––––––––––––––––––––––––––––––––––

$color      : red   !default;
$font-family: Arial !default; 

.foo { color: $color; }
.bar { font-family: $font-family; }



// ––––––––––––––––––––––––––––––––––––––
// style.scss (compile file) 
// ––––––––––––––––––––––––––––––––––––––
// redefine variables
$color: blue;
$font-family: Roboto;

// add wrapper if needed (will be added to all selectors)
.australia {
    @import '_style.scss';
}

---

和一小时前的问题差不多？我检查了那个问题，但没有帮助。它指的是某一组元素。但对我来说，整个网站都需要它。这些变量在多个类中多次使用。我不想编辑每个选择器。因为有成千上万的选择器使用这些变量。编辑每一个都将花费整个生命。在这种情况下，可以使用@import和！默认变量–我将添加一个新示例。还要注意关于CSS变量的更新部分