O meu código está assim:

@include all-plataformas-sprites; .plataformas-logo-android, .plataformas-logo-apple, .plataformas-logo-blackberry, .plataformas-logo-windows { width: 50px; height: 50px; }

.plataformas { padding: 0; }

.plataformas li { display: inline-block; width: 50px; height: 60px; text-indent: -9999px; @extend %image-replacement; margin: 1em 1.5em 0 0;

span {
    float: right;
  }

}

.plataformas li:nth-child(1) { background-image: url(../imagens/logo-apple.png); }

.plataformas li:nth-child(2) { background-image: url(../imagens/logo-android.png); }

.plataformas li:nth-child(3) { background-image: url(../imagens/logo-windows.png); }

.plataformas li:nth-child(4) { background-image: url(../imagens/logo-blackberry.png); }

E eu não estou sabendo como configurar as classes plataformas li:nth-child, e nem o que fazer com o html. Poderiam me ajudar, por favor?