Aparece os icones mas não mudam de lugar

                    <li class ="plataforma-logo-android">Android</li>
                    <li class ="plataforma-logo-apple">Apple</li>
                    <li class ="plataforma-logo-windows">Windows Phone</li>
                    <li class ="plataforma-logo-blackberry">BlackBerry</li>
                </ul>

sobre.scss

 @include all-plataformas-sprites;

.plataformas li{
  width: 60px;
  height: 60px;
}
li.plataformas-logo-android{
     background-position: 0 0;
}
li.plataformas-logo-apple {
  background-position: 0 -70px;
}

li.plataformas-logo-blackberry {
  background-position: 0 -131px;
    width: 65px;
}

li.plataformas-logo-windows {
  background-position: 0 -196px;
}

foi o unico modo para conseguir fazer funcionar o estilos.css ficou assim:

.plataformas li {
  display: inline-block;
  width: 50px;
  height: 60px;
  background-position: center;
  margin: 1em 1.5em 0 0;
}

.plataformas-logo-android {
  background-position: 0 0;
}

.plataformas-logo-apple {
  background-position: 0 -70px;
}

.plataformas-logo-blackberry {
  background-position: 0 -141px;
}

.plataformas-logo-windows {
  background-position: 0 -196px;
}

.plataformas li {
  width: 60px;
  height: 60px;
}

li.plataformas-logo-android {
  background-position: 0 0;
}

li.plataformas-logo-apple {
  background-position: 0 -70px;
}

li.plataformas-logo-blackberry {
  background-position: 0 -131px;
  width: 65px;
}

li.plataformas-logo-windows {
  background-position: 0 -196px;
}

.plataformas li {
  background-image: url(../imagens/plataformas-s27d043805f.png);
}

Não sei o motivo que precisei usar o li.nome-da-classe para fazer funcionar se o compass ja tinha gerado sem o li ( que não funcionou)