css - 使用 SCSS 函数复制具有不同背景的多个类样式

Question

我有一个相同的类列表，但需要在其中包含不同的背景引用:

    .name-one {
        @include thumb-source;
        background: url('../name-one.png') no-repeat;
    }

    .name-two {
        @include thumb-source;
        background: url('../name-two.png') no-repeat;
    }

    .name-three {
        @include thumb-source;
        background: url('../name-three.png') no-repeat;
    }

and it goes on for a while ...

如您所见，类名也复制了文件名。我想知道是否有一种方法可以使用 scss 编写一个函数来传递一个包含我的类名的数组并显着减少重复？

Answer 1

你可以使用@each:

$list: "one", "two", "three";
@each $item in $list {
    .name-#{$cat} {
        @include thumb-source;
        background: url('../name-#{$cat}.png') no-repeat;
    }
}

@each Documentation