每个Scss中的预成型倍数

Neil 发表于 Dev

尼尔

有谁知道如何在我的左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;
}

所需的Ouput：

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

西曼侬

您必须在循环内进行数学运算，否则每次循环都将获得相同的值。

$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
   }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。