SASS Best Practice

Se você precisar criar muitos estilos diferentes, mas semelhantes, lembre-se do tipo de dados da lista e da regra @each.

Mau

.x-icon {

    width: 40px;
    height: 40px;
    background-size: contain;

    &.cat {
         background-image: url($icons-dir + '/cat.png');
    }
    &.dog {
         background-image: url($icons-dir + '/dog.png');
    }
    &.horse {
         background-image: url($icons-dir + '/horse.png');
    }
    &.pig {
         background-image: url($icons-dir + '/pig.png');
    }

}

Boa

.x-icon {

    $icons: cat dog horse pig;
    $size: 40px;

    width: $size;
    height: $size;
    background-size: contain;

    @each $icon in $icons {
        &.#{$icon} {
            background-image: url($icons-dir + '/#{$icon}.png');
        }
    }

}

Onde $ icons-dir aponta para sua pasta de recursos de ícones e foi previamente definido dentro de um arquivo _variables.scss compartilhado .