Alguém conseguiu fazer o último exercício e criar um sprite automático com as logos das plataformas e posicioná-lo corretamente?
Eu consegui criar o sprite automático mas estou tendo problemas para posicionar na horizontal os mesmos e, além disso, aparecem os textos de Android, Apple, Windows e Blackberry do lado dos ícones na vertical. Meu código atual está assim:
Arquivo estilos.scss:
$plataformas-spacing: 10px;
@import 'plataformas/*.png';
Arquivo sobre.scss:
@include all-plataformas-sprites;
.plataformas {}
.plataformas-android, .plataformas-apple,
.plataformas-blackberry, .plataformas-windows {
padding: 0;
display: inline-block;
width: 65px;
height: 65px;
@extend %image-replecement;
margin: 1em 1.5em 0 0;
}
Arquivo index.html:
<ul class="plataformas">
<li>Apple<span class="plataformas-apple"></li>
<li>Android<span class="plataformas-android"></li>
<li>Windows Phone<span class="plataformas-windows"></li>
<li>BlackBerry<span class="plataformas-blackberry"></li>
</ul>
Essas foram as alterações que fiz, mas o efeito obtido não é o desejado.