Question

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

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

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;
  }
}

Answer 2

在没有编写新声明的情况下，实际上不可能使用Sass循环来增加选择器。您可以像这样使用变量选择器：

$j: 0;
.ff#{$j}, .ff#{$j+1}, .ff#{$j+2} ... {
  color: red;
}

但这并没有真正为你节省太多的复杂性。

由于您希望在各种选择器中使用相同的声明，请尝试使用原生CSS substring attribute selector：

div[class^="tab-content-"] {
  background-color: red;
}

这将选择任何具有以“tab-content - ”开头的类的div。

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

2 个答案: