有没有办法编写scss mixin来自动增加多个类

Question

所以我试图自动增加一个类,因为我希望它们具有相同的css属性.我不想写出所有的CSS.

.tab-content-1,
.tab-content-2,
.tab-content-3,
.tab-content-4,
.tab-content-5,
.tab-content-6,
.tab-content-7,
.tab-content-8,
.tab-content-9,
.tab-content-10 {
	z-index: 1;
	top: 0;
	left: 0;
	opacity: 1;
	-webkit-transform: scale(1,1);
	-webkit-transform: rotate(0deg);
}

<div class="tab-container">
    <div class="tab-content-1">div 1</div>
    <div class="tab-content-2">div 2</div>
    <div class="tab-content-3">div 3</div>
    <div class="tab-content-4">div 4</div>
    <div class="tab-content-5">div 5</div>
    <div class="tab-content-6">div 6</div>
    <div class="tab-content-7">div 7</div>
    <div class="tab-content-8">div 8</div>
    <div class="tab-content-9">div 9</div>
    <div class="tab-content-10">div 10</div>
</div>

Answer 1

@for $i from 1 through 10 {
  .foo-#{$i} {
    padding:$i * 10;
  }
}

更新

我误解了这个问题.在那种情况下你可以尝试@extend

%foo {
  padding: 10px;
}

@for $i from 1 through 10 {
  .bar-#{$i} {
    @extend %foo;
  }
}