Javascript SASS在实现多语言时混合排版问题

我在一个react网站上工作，该网站使用sass管理样式。所以在这个网站上，我通过sass mixins实现了英语的排版。 版式中有不同的标题和正文，如标题1、标题2、正文1、正文2等。排版中每个元素的格式如下

  @mixin body1{
      font-size:10px,
      font-weight: 700,
      letter-spacing: 1px,
      line-height:1  
  }
   @mixin body2{
      font-size:5px,
      font-weight: 400,
      letter-spacing: 1px,
      line-height:1  
    }

然后我将这个主体包含在我的组件css中，如：

   .primaryButton .text{
     @include body1;
    }
    .secondaryButton .text{
     @include body2;
    }

所以按钮是单个组件，我们只是基于变体道具和样式更改父类

现在的问题是，我必须为不同的语言实现排版，比如大约50种语言，我不确定哪种通用方法最适合实现

注意：

对于排版，我们没有使用泛型类而不是mixin，因为每个组件都有变体和主题，对于每个变体和主题，同一元素可能有不同的字体大小和其他属性，所以对于不同的变体，我们根据组件父类加载不同的排版元素

此外，我不想在每个文件中，然后根据每种语言的父类覆盖英文排版，因为项目规模太大，而且50种语言也太多。在未来，语言可以增加

你可以这样用

占位符

%body1{
  font-size:10px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height:1;
}
%body2{
  font-size:5px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height:1;
}
%body3{
  font-size:5px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height:1;
}

配置

$langsConfig: (
  "en": (body2),
  "fr": (body1, body2),
  "cn": (body2, body3),
  "bn": (body1, body2, body3),
);

css生成器

@each $lang, $placeholderList in $langsConfig {
  .#{$lang} {
    .primaryButton {
      .text {
        @each $placeholder in $placeholderList {
          @extend %#{$placeholder}
        }
      }
    }
  }
}

输出

.bn .primaryButton .text, .fr .primaryButton .text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  color: red;
}

.bn .primaryButton .text, .cn .primaryButton .text, .fr .primaryButton .text, .en .primaryButton .text {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1;
  color: green;
}

.bn .primaryButton .text, .cn .primaryButton .text {
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1;
  color: yellow;
}

反应执行

export default function App() {
  const lang = "en";
  return (
    <div className={`${lang}`}>
      <div className="primaryButton">
        <h1 className="text">Hello CodeSandbox</h1>
        <h2 className="text">Start editing to see some magic happen!</h2>
      </div>
    </div>
  );
}

导出默认函数App（）{
const lang=“en”；
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

说明：

占位符：不要混合使用占位符。 配置：语言名称和相关混合列表 生成器：它将与configs进行循环，并以动态方式创建css

注意：如果要使用基于组件的SCS。然后创建一个scss函数并将变量传递到css生成器中

这是你的电话号码

---

如果有帮助，请告诉我。如果我能知道react端的实现，它可能会更具动态性。

像这样过度使用mixin会大大增加输出CSS文件的大小。请记住，它基本上只是复制粘贴，因为CSS是一种“愚蠢”的声明性语言。您仍然可以灵活地使用泛型css类—您只需要做得更好。@max我也可以将泛型类用于排版，但对于每个组件，我们都有不同样式的变体。因此，为泛型类的每个HTML元素设置条件也是一种不好的做法。我没有对每个html元素设置条件，而是对父类设置条件，然后使用该类，通过使用mixin为子元素设置样式。