Is there a way to write a scss mixin to auto increment multiple classes

Question

So I am trying to auto increment a class because I want them to have the same css property. I don't want to have to write out all the 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>

ughitsaaron · Accepted Answer · 2014-10-22T21:24:58.173

6

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

Update

I misunderstood the question. In that case you could try @extend

%foo {
  padding: 10px;
}

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

edited Oct 22 '14 at 21:24

answered Oct 22 '14 at 20:36

ughitsaaron

517
4
10

That is not what I am looking for that put all my classes separately. I want el1, el2, el3{css property} – Amen Ra Oct 22 '14 at 20:52
I had no idea sass had control directives... ((goes back to all previous sass projects to neurotically fix things)) – KFunk Jul 09 '16 at 04:48

KatieK · Answer 2 · 2014-10-22T21:18:17.593

It isn't really possible to use Sass loops to increment just the selector without also writing a new declaration. You could just use a variable for the selector like this:

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

But that doesn't really save you much complexity.

Since you want to use the same declaration with a variety of selectors, try using the native CSS substring attribute selector:

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

This will select any div with a class that begins with "tab-content-".

Is there a way to write a scss mixin to auto increment multiple classes

2 Answers2