Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Consegui... Mas não como queria.

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>
2 respostas
solução!

Fala ai Sanmir, tudo bem? Muito bom, para mim esta tudo certo a solução e você fez como deveria.

Espero ter ajudado.

Sanmir, tudo bem?

Então ao invés de criar uma pasta imagens\sprite\ as dua imagens sprite, você cria a pasta plataforma contendo as duas imagens sprite aonde exatamente. Dentro da pasta imagens fora é isso, que não entendi.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software