Demo: Using @extend in place of the enumerate() helper.
.class-1
.class-2
.class-3
.class-4
.class-5
<div class='example'> <div class='class-1'>.class-1</div> <div class='class-2'>.class-2</div> <div class='class-3'>.class-3</div> <div class='class-4'>.class-4</div> <div class='class-5'>.class-5</div> </div>
.example .class-1 .class-1 .class-2 .class-2 .class-3 .class-3 .class-4 .class-4 .class-5 .class-5
.example {
.base-class {
background-color: #aaaaaa;
border: 2px solid #777777;
margin: 1em;
}
@for $i from 2 through 4 {
.class-#{$i} {
@extend .base-class;
margin-left: 1em * ($i - 1);
}
}
}
.example
.base-class
background-color: #aaaaaa
border: 2px solid #777777
margin: 1em
@for $i from 2 through 4
.class-#{$i}
@extend .base-class
margin-left: 1em * ($i - 1)
.example .base-class, .example .class-2, .example .class-3, .example .class-4 {
background-color: #aaaaaa;
border: 2px solid #777777;
margin: 1em;
}
.example .class-2 {
margin-left: 1em;
}
.example .class-3 {
margin-left: 2em;
}
.example .class-4 {
margin-left: 3em;
}