如何计算 SCSS 中百分比值的倍数？

问题描述

问题：

我有一个常量值 $length: 12.5%。

我还有一个包含不同乘数 $multipliers : ('1','2','3','4') 的列表。

在 @each 中，我将遍历 $multipliers 中的所有项目，并且必须计算以下公式。

公式 => $length * $multiplier + 1

@each $multiplier in $multipliers {
  .item-#{$multiplier} {
     top: << FORMULA >>
  }
}

问题：

有人可以帮助如何计算 SCSS 中包含百分比的最高值吗？

解决方法

您可以使用 SCSS @for loop 来实现这一点。

$length: 12.5%;

@for $i from 1 through 4 {
  .item-#{$i} {
    top: ($i * $length);
  }
}

它将生成此 CSS：

.item-1 {
  top: 12.5%;
}

.item-2 {
  top: 25%;
}

.item-3 {
  top: 37.5%;
}

.item-4 {
  top: 50%;
}

Example on CodePen。使用右上角的 CSS 下拉菜单“查看编译的 CSS”。