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

Answer 2

如果类名是顺序的，那么最好使用实际数字，这样就可以使用@for循环。

$total: 4;

@for $i from 1 to $total {
  .name-#{$i} {
    @include thumb-source;
    background: url('../name-#{$i}.png') no-repeat;
  }
}

我还要为每个项添加一个类，这样你就不需要@include thumb-source;了。那是很多船。

<div class="name name-1"></div>
<div class="name name-2"></div>
<div class="name name-3"></div>

然后做：

$total: 4;

.name {
  @include thumb-source;
  background-repeat: no-repeat;
  @for $i from 1 to $total {
    &.name-#{$i} {
      background-image: url('../name-#{$i}.png');
    }
  }
}

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

2 个答案: