Eu quero mostrar como criar imagens de sprites de maneira fácil para aplicativos de rails usando sass e bússola. Vou usar uma seta esquerda e exemplo certo.

Crie uma pasta para colocar imagens para usar no sprite em:

Rails.root / app / assets / images / arrows-sprites

Coloque os arquivos de setas lá:

arrow-sprites / arrow-left.png

arrows-sprites / arrow-right.png

Configure seu .CSS.SCSS

1. Importações necessárias

@import “compass”

@import “compass / utilities / sprites / base”

2. Adicione a variável $ sprites-flechas para dizer onde estão seus arquivos para o sprite

$sprites-arrows: sprite-map("arrows-sprites/*.png",$new-position: 100%, $spacing: 100px, $new-repeat: no-repeat);

3. Adicionar estilo de plano de fundo ao elemento .arrow

a.arrow{
  background: $sprites-arrows no-repeat;
  width: 20px;
  height: 20px;
}  

4. Defina . Seta para a esquerda para usar o arquivo de seta para a esquerda

a.arrow.left{
  @include sprite-background-position($sprites-arrows, arrow-left, 17px, 0px);
}

5. Defina . Seta para a direita para usar o arquivo de seta para a esquerda

a.arrow.right{
  @include sprite-background-position($sprites-arrows, arrow-right, 17px, 0px);
}

6. É isso, agora você pode usar sprites de maneira fácil 🙂

7. Preste atenção na documentação da bússola para melhorar seu conhecimento

http://compass-style.org/help/tutorials/spriting/

Obrigado e siga: @eduzera 🙂