Question

我正在尝试编写SASS mixin，以动态循环遍历元素中的项目数，然后应用自定义动画。

// MIXIN
@mixin staggerAnimation($el: $animated-elem) {
    @for $i from 1 through 4 {
        #{$el}:nth-child( #{$i} ) {
            @content
        }
    }
}

// Usage from external SASS file
$animated-elem: '.item';
@include staggerAnimation($animated-elem) {
    // This property needs to be different based on the usage
    animation: FadeIn 1s #{$el * 0.35}s ease 1 both;
}

Answer 1

使用内容块参数（在最新版本的Dart Sass中可用），您可以将$i值传递到@content块。

// MIXIN
@mixin staggerAnimation($el: $animated-elem) {
    @for $i from 1 through 4 {
        #{$el}:nth-child( #{$i} ) {
            @content($i)
        }
    }
}

// Usage from external SASS file
$animated-elem: '.item';
@include staggerAnimation($animated-elem) using ($i) {
    // Then you can use the $i variable however you wish in here
    animation: FadeIn 1s #{$i * 0.35}s ease 1 both;
}

如果需要，您甚至可以传递两个变量（例如@content($i, $el)和using ($i, $el)），只需确保它们在两个地方的顺序相同即可。

注意：除非您使用最新的Dart Sass编译器来编译scs，否则此不会工作，这是一项非常新的语言功能，在编写时尚未实施到Node Sass中。

如何遍历Sass Mixin的内容指令？

1 个答案: