带有步骤的文本字体粗细功能的 SASS

Posted 2023-03-07

【中文标题】带有步骤的文本字体粗细功能的 SASS

【英文标题】：SASS for function for text font-weight with steps

【发布时间】：2020-07-02 12:38:30

【问题描述】：

我想迭代 font-weight - 100、200、300、400、500、600、700、800 和 900

这是我正在使用的功能

   @for $i from 100 through 900 
    .font-weight-#$i 
       font-weight: 0 + ($i * 1);
      
    

问题是，它从 100、101、102 一直集成到 900。我怎样才能使这个功能更高效？如何仅输出 100、200、300、400、500、600、700、800 和 900 值

【参考方案1】：

最简单的解决方案是从 1 迭代到 9 并将其乘以 100。

@for $i from 1 through 9 
   .font-weight-#$i * 100 
      font-weight: ($i * 100);
   

【讨论】：

不知怎的，我忘了这样想。谢谢