How can I use @for in sass to assign background positions to multiple classes <p>Ok so here's my code:</p> <pre><code>.file-icon,.folder-icon{ $size:24px; position: absolute; top: 10px; left: 44px; display: block; float: left; width: $size; height: $size; margin-right: 10px; background: $driveIcon; &amp;.folder-close{ background-position: 0 -72px; &amp;.folder-open{ background-position: -$size -72px; } } &amp;.archiveIcon{ background-position: -$size*2 -72px; } &amp;.audioIcon{ background-position: -$size*3 -72px; } &amp;.brokenIcon{ background-position: -$size*4 -72px; } &amp;.docIcon{ background-position: -$size*5 -72px; } &amp;.imgfile{ background-position: -$size*6 -72px; } &amp;.pdfIcon{ background-position: -$size*7 -72px; } &amp;.pptx{ background-position: -$size*8 -72px; } &amp;.txtIcon{ background-position: -$size*9 -72px; } &amp;.unknown{ background-position: -$size*10 -72px; } &amp;.videoIcon{ background-position: -$size*11 -72px; } &amp;.xlsIcon{ background-position: -$size*12 -72px; } &amp;.viewer{ background-position: -$size*13 -72px; &amp;.folder-open{ background-position: -$size*14 -72px; } } &amp;.owner{ background-position: -$size*15 -72px; &amp;.folder-open{ background-position: -$size*16 -72px; } } &amp;.moderator{ background-position: -$size*17 -72px; &amp;.folder-open{ background-position: -$size*18 -72px; } } } </code></pre> <p>What I want to do is automate this assigning of background positioning. I tried using @for for the actual statement but not able to figure out how to assign the results one by one to my custom second classes. Please help me out, i'm a beginner in sass. Thankyou.</p> <p>This is what I've done up till now:</p> <pre><code>@for $i from 0 to 18{ background-position: -($size*$i} -72px; } </code></pre>