Hi all,

This article seems a bit old since SASS is nowadays well-known and it has a lot of great tutorials everywhere, but i really wanted to suggest you to never forget to give your website images a proper naming structure, expecially icons.
I had to deal with a lot of icons during a recent project:

.icon_s1{
    background: url('../images/s1.png') no-repeat top left;
    &.active{
        background-image: url('../images/s1_on.png');  
    }
}
.icon_s2{
    background: url('../images/s2.png') no-repeat top left;
    &.active{
        background-image: url('../images/s2_on.png');
    }
}
.icon_s3{
    background: url('../images/s3.png') no-repeat top left;
    &.active{
        background-image: url('../images/s3_on.png');
    }
}
.icon_s4{
    background: url('../images/s4.png') no-repeat top left;
    &.active{
        background-image: url('../images/s4_on.png');
    }
}
// others

… and after 30 icons the whole _icons.sass would become a whole mess as you can see.
The first thing i thought is to use a common sass for cycle..

@for $i from 1 through 9{
    .icon_s#{$i} {
        background-image: url('../images/s#{$i}.png');
        &.active{
            background-image: url('../images/s#{$i}_on.png');  
        }
    }
}

..and things were far better, but after that i had to deal with different namings, not only S(x), so a foreach cycle solved everything smoothly:

$icons: m1 m2 m3 s1 s2 s3 s4 s5 s6 c1 c2 c3 c4 c5 c6 i1 i2 i3 i4 i5 i6 on off;
@each $icon in $icons {
    .icon_#{$icon} {
        background: url('../images/#{$icon}.png') no-repeat top left;
        &.active{
            background-image: url('../images/#{$icon}_on.png');
        }
    }
}

Never forget about good pratices, they save coffees!