Oi!
Depois de criar a pasta "plataformas" com todos os arquivos de imagem dentro.
Usei as seguintes linhas de código para inserir o background-image com o nome do sprite dinâmico:
No 'estilos.scss', no topo:
$plataformas-spacing: 5px;
@import 'plataformas/*.png';
No arquivo "sobre.scss"
@include all-plataformas-sprites;
Depois, no index.html, substitui o nome das classes, dos elementos .plataformas li, cada um com o seu respectivo nome de classe gerado pelo Compass.
Tudo funciona, com exceção do logo do BlackBerry.
O logo do BlackBerry , fica um pouco pra cima, aparecendo um pouco o logo do Windows.
Então resolvi setar uma classe com o mesmo nome dado pelo compass, para o elemento com o logo do blackberry, para sobrescrever a regra do Compass.
Usei essa regra:
.plataformas-logo-blackberry {
background-position: 0px -127px;
width: 66px!important;
height: 54px!important;
}
Funciona.
Mas minha dúvida é:
Isso não seria uma gambiarra?
Tem outra maneira de solucionar esse problema?