Using n inside calc
Not exactly what you may be after, but you can achieve a similar effect with scss if you know the number of elements. Just bear in mind that this will generate a lot of css:
@for $i from 1 through 7 {
&:nth-child(#{$i}) {
margin-left: calc(#{$i} * 46px);
}
}
You can't, as mentioned by @SLaks. But this can be solved by placing each next element inside the previous one.
See with divs:
div {
margin-left: 46px
}
<div>test
<div>test
<div>test
<div>test</div>
</div>
</div>
</div>
Or, use jQuery.
var margin=0;
$("div").each(function(){
$(this).css("margin-left",margin+=46)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
No; you can't do that.
The counter
feature can almost do that, except that it can't be used with calc()
either.