Question

我正在尝试创建动态mixin来为我的图像创建预加载器。生成类的上半部分运行良好，但下部不会。

这是代码：

$n: 5;
$step: 100 / $n;

@keyframes logo-bg-change {
    @for $i from 0 to $n {
        $current-frame: $step * $i;

        #{$current-frame}% {
            background-image: url('../images/logo-bg/bg#{$i + 1}.jpg');
        }
    }
}

@mixin preload-content($cycles) {
    $content: '';

    @for $i from 0 to $n {
        $content: $content + ' ' + url('../images/logo-bg/bg#{$i + 1}.jpg');
    }

    content: $content;
}

body:after {
    display: none;
    @include preload-content($n);
}

底部的结果是：

body: after {
    display: none;
    content: ' url("../images/logo-bg/bg1.jpg") url("../images/logo-bg/bg2.jpg") url("../images/logo-bg/bg3.jpg") url("../images/logo-bg/bg4.jpg") url("../images/logo-bg/bg5.jpg")';
}

但它应该是：

body:after {
    display: none;
    content:
        url('../images/logo-bg/bg1.jpg')
        url('../images/logo-bg/bg2.jpg')
        url('../images/logo-bg/bg3.jpg')
        url('../images/logo-bg/bg4.jpg')
        url('../images/logo-bg/bg5.jpg');
}

有没有办法将网址标记链接为标记而不是字符串？

Answer 1

使用append()函数创建列表。

@mixin preload-content($cycles) {
    $content: ();

    @for $i from 0 to $n {
        $content: append($content, url('../images/logo-bg/bg#{$i + 1}.jpg'));
    }

    content: $content;
}

使用for循环生成由多个URL形成的内容

1 个答案: