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..

Read more