如何在 sass 中动态更改 mixin 函数中的变量？

Question

我的 sass 文件中有这个 mixin 函数，每次使用它时我都想从中计数。每次计数器需要增加 1，所以正确的值会相应地改变。

问题是我有一个未排序的列表，其中包含未知数量的元素。列表项可以是某种类型，如果是，它们需要在视图中以完全不同的方式放置。我想通过添加position: absolute 然后添加动态右值（因此它们不会重叠）将它们与站点的右上角对齐。

我不知道我的方法是否正确，但我的问题是如何动态更改 $item-number 变量，然后稍后引用该值？

$item-number: 1 !default;

@function times($value1, $value2) {
    @return $value1 * $value2;
}

@function plus($value1, $value2) {
    @return $value1 + $value2;
}

@mixin child($n) {
    $item-number: plus($n, 1);
    &:nth-child(#{$n}){
          right: times(50px, $n) !important;
    }
}

li {

    @include media-breakpoint-up(lg) {
            position: absolute;
            top: -30px;
            right: 0;
            @include child($item-number);
    }
}

Answer 1

你需要专门循环mixin一定次数，否则sass怎么知道要创建多少nth-child选择器？

我已经删除了您的自定义函数以使我的示例更简洁，但是您可以看到我创建了一个围绕对 mixin 的调用的循环，该循环运行 9 次，每次都将索引传递给函数：

@mixin child($n) {
    &:nth-child(#{$n}){
        right: (50px * $n) !important;
    }
}

li {
    position: absolute;
    top: -30px;
    right: 0;

    @for $i from 1 through 9 {
        @include child($i);
    }
}