文章/答案/技术大牛

发布

社区首页 >问答首页 >实现多语言时的SASS Mixin排版问题

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

Stack Overflow用户

提问于 2020-07-26 10:38:22

回答 1查看 423关注 0票数 0

我是在一个反应网站，使用sass管理风格。因此，在网站上，我通过sass实现了英语语言的排版。排版中有不同的标题和体，如heading1、heading2、body1、body2等。排版中每个元素的格式如下

  @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种语言，我不知道哪种通用方法最适合实现。

注:

我们没有使用泛型类而不是混合类来进行排版，因为每个组件都有变化和主题，对于每个变化和主题，相同的元素可能具有不同的字体大小和其他属性，因此对于不同的变化，我们根据组件父类加载不同的排版元素。
另外，我不想进入每个文件，然后根据每种语言的父类覆盖英文排版，因为项目规模太大了，而且50种语言对于这种方法来说也太多了。在未来，语言可以增加。

javascript

html

css

sass

frontend

回答 1

Stack Overflow用户

发布于 2020-07-26 18:28:11

你可以这样用

占位符

%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生成器中传递变量。

这是沙箱连接

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63099021

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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