在每个Scss中执行乘法

Question

有没有人知道如何在我的左css值上实现乘法。

当前代码：

$no-of-heading-elements:(1,2);

@each $nav-list-no in $no-of-heading-elements{
    $value:-194px;

    [data-nav="#{$nav-list-no}"].secondry-header-block &{
        left: $value;
    }
}

每个左css值应为：

[data-nav="1"].secondry-header-block .secondary-sub-header {
  left: -194px;
}
[data-nav="2"].secondry-header-block .secondary-sub-header {
  left: -(194px * 2);
}

当前输出：

[data-nav="1"].secondry-header-block .secondary-sub-header {
  left: -194px;
}
[data-nav="2"].secondry-header-block .secondary-sub-header {
  left: -194px;
}

所需的输出：

[data-nav="1"].secondry-header-block .secondary-sub-header {
  left: -194px;
}
[data-nav="2"].secondry-header-block .secondary-sub-header {
  left: -388px;
}

Answer 1

你必须在循环中进行数学运算，否则你只需获得每次传递产生的相同值。

$no-of-heading-elements:(1,2);

@each $nav-list-no in $no-of-heading-elements{
    $value: 194px;

    [data-nav="#{$nav-list-no}"].secondry-header-block {
        left: -($value * $nav-list-no); // starts with -194px
        left: -($value * ($nav-list-no - 1)); // starts with 0
   }
}