Obs: Tive que excluir a importação e inclusão do sprit(pasta utilizada na aula), pois tentei de muitas formas inserir as duas importações, e só aceitava uma... Procurei na internet e por enquanto nada, queria muito realizar esse processo...
Resolução do exercício
Depois de adicionar os ícones dentro da pasta plataformas, foi importado a pasta para o estilo.scss (para criar o sprite na pasta img):
estilo.scss
@import "plataformas/*.png";
No arquivo sobre.scss, foi adicionado o @include all-plataformas-sprites;
logo em acima de .plataformas li
, e excluído todas as .plataformas li
que obtinham pseudo-classes nth-child:
@include all-plataformas-sprites;
.plataformas li {
display: inline-block;
width: 65px; // adição de 5px, necessário para o blackberry.png
height: 60px;
// background-position: center;
margin: 1em 1.5em 0 0;
@extend %image-replacement;
}
//.plataformas li:nth-child's EXCLUÍDAS
CSS COMPILADO
.plataformas-sprite, .plataformas-logo-android, .plataformas-logo-apple, .plataformas-logo-blackberry, .plataformas-logo-windows {
background-image: url('../imagens/plataformas-s945a5d7209.png');
background-repeat: no-repeat;
/////// background-position GERADOS PELO COMPASS
.plataformas-logo-android {
background-position: 0 0;
}
.plataformas-logo-apple {
background-position: 0 -60px;
}
.plataformas-logo-blackberry {
background-position: 0 -121px;
}
.plataformas-logo-windows {
background-position: 0 -166px;
}
As mudanças percebíveis, são, o nome das nossas classes que definimos no html, e a criação de background-position
em cada class (por conta do compass).
Bom, os novos background-position
são o do sprite, não nos causará problemas. Agora a mudança nas classes, esses sim, teremos que ir até nosso index.html e editá-los, de acordo com a compilação do CSS do código já passado anteriormente.
Feito as mudanças, o nosso index.html ficará assim:
<ul class="plataformas">
<li class="plataformas-logo-apple">Apple</li>
<li class="plataformas-logo-android">Android</li>
<li class="plataformas-logo-windows">windows Phone</li>
<li class="plataformas-logo-blackberry">blackberry </li>
</ul>