有没有办法编写一个scss mixin来自动增加多个类[重复]答案

【问题标题】：Is there a way to write a scss mixin to auto increment multiple classes [duplicate]有没有办法编写一个scss mixin来自动增加多个类[重复]
【发布时间】：2014-12-18 09:58:42
【问题描述】：

所以我试图自动增加一个类，因为我希望它们具有相同的 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>

【问题讨论】：

标签： loops sass counter

【解决方案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;
  }
}

【讨论】：

这不是我想要的，将我的所有课程分开。我想要 el1, el2, el3{css 属性}
这正是我所需要的，非常感谢！！！！
我不知道 sass 有控制指令...（（回到所有以前的 sass 项目以神经质地修复问题））

【解决方案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。

【讨论】：