Question

我的sass文件中有此mixin函数，每次使用时我都要从中开始计数。每次计数器需要加1，因此正确的值将相应地改变。

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

我不知道我的方法是否正确，但是我的问题是如何动态更改$ 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

您需要专门循环混入一定次数，否则，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);
    }
}

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

1 个答案: