实现多语言时的 SASS Mixin 排版问题答案

【问题标题】：SASS Mixin typography issue while implementing multi language实现多语言时的 SASS Mixin 排版问题
【发布时间】：2020-07-26 10:38:22
【问题描述】：

我正在开发一个使用 sass 来管理样式的 react 网站。所以在网站上，我通过 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 种语言对于这种方法来说也太多了。并且在未来语言可以增加。

【问题讨论】：

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

标签： javascript html css sass frontend

【解决方案1】：

你可以这样使用

占位符

%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>
  );
}

解释：

占位符：代替混合使用占位符。 Config：语言名称及相关混音列表生成器：它将使用配置进行循环并以动态方式创建 css

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

这里是Sandbox link

如果有帮助，请告诉我。如果我能知道反应方面的实现，它可能会更加动态。

【讨论】：