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

Aula 08 - Posicionamento de Sprite

Olá, não consegui entender bem como o compass ajusta o posicionamento do sprites, o código original era:

.icone-check, icone-x {
  background: url(../imagens/sprite.png) no-repeat;
  width: 18px;
  height: 18px;
}

.icone-check {
  background-position: -5px -5px;
}

.icone-x {
  background-position: -33px -5px;
}

e no final ficou:

@include all-sprite-sprites;
.sprite-icone-check, sprite-icone-x {
  width: 18px;
  height: 18px;
}

Sei que foi gerado as classes para cada ícone com base no nome dos arquivos, mas como o compass sabe onde posicionar esses elementos? não entendi essa parte.

3 respostas
solução!

Fala ai Rafael, tudo bem? Na verdade não é muito bem o Compass que sabe posicionar os elementos e sim onde os elementos estão posicionados na imagem.

Isso porque um sprite nada mais é do que uma imagem com vários pedaços e é exatamente isso que o Compass faz, ele pega varias imagens e junta em uma só para você.

Dai, uma imagem possuí posições X e Y, o Compass ao juntar as imagens ele grava a posição inicial de cada imagem que ele juntou e dado o height e width que você informou ele consegue calcular as posições finais.

Imagine que seu ícone de check começa na posição 100 em X e 150 em Y.

Se a altura que você informou é 18, ele vai pegar do X 100 até X 118, e o mesmo para a largura, ficaria do 150 até 168.

Espero ter ajudado.

Entendi sim, vou colocar em pratica se surgir duvidas futuras reposto aqui. Obrigado.

Magina Rafael, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

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