Entrar Ainda não tem acesso?
3
respostas

Dúvida no exercíco Plataformas

Referente ao curso Sass e Compass: Descomplicando o CSS, no capítulo Compass e atividade Outro sprite

por Márcia Sousa Lages
| 126.6k xp | 63 posts

Fiz mas está dando erro e não estou entendo. Ele repete em todos a imagem da apple e com um pedaço da blackberry.

No estilos.scss

$plataformas-spacing: 5px;
@import 'plataformas/*.png';

No arquivos sobre.scss

@include all-plataformas-sprites;

No index.html inserir as classes

<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>
3 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala aí Márcia, tudo bem? Poderia mandar um print para vermos o problema acontecendo? Ficaria mais fácil para tentar ajudar.

Obs: Para mandar o print, você pode subir ele em algum hospedador de imagens, eu gosto e recomendo o Cloudinary:

https://cloudinary.com

Depois, você pega a URL da imagem que subiu e posta aqui com a seguinte sintaxe no editor:

![Nome_da_imagem](Link_da_imagem)

Fico no aguardo.

por Márcia Sousa Lages
| 126.6k xp | 63 posts

Oi eu já consegui resolver, tem que comentar ou deletar o background position do .plataforma li, pois está sobrescrevendo o código gerado pelo compass.

.plataformas li {
  display: inline-block;
  width: 65px;
  height: 60px;
  @extend %image-replacement;
  /*background-position: center;*/
  margin: 1em 1.5em 0 0;
}
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Boa Márcia \o/, fico feliz que tenha conseguido resolver o problema.

Obs: Não esqueça de marcar o tópico como solucionado para que possa ajudar outros alunos com dúvida/problema semelhante.

Abraços