Spriteful

1 view

Skip to first unread message

Alexandrie Gallup

unread,

Aug 3, 2024, 5:32:18 PM8/3/24

to downnessiefrer

Faz tempo que gerar sprites deixou de ser uma tarefa trabalhosa e chata de se fazer. Existem diversos sites que permitem que voc faa isso online, assim como algumas ferramentas integradas ao Rails, como o caso do Compass. E hoje veremos uma alternativa que surgiu h algum tempo, mas que muita gente no conhece. Trata-se do Spriteful.

O Spriteful, projeto criado pelo Lucas Mazza, uma ferramenta command-line escrita em Ruby que pode ser usada sem ter que adicionar uma dependncia ao seu projeto Rails, por exemplo. Antes, era muito comum adicionarmos o Compass apenas por causa da gerao de sprites, mas depois do surgimento do Bourbon, isso no fazia mais sentido (sim, eu acho o Bourbon infinitamente melhor que Compass).

Outra vantagem que agora voc pode gerar sprites facilmente mesmo sem estar em um projeto Rails. Isso porque o Spriteful totalmente independente; basta instalar a ferramenta e comear a gerar seus sprites, com sada para CSS ou SCSS.

Como eu j disse, o Spriteful possui suporte para sprites SVG. Neste exemplo vou usar alguns cones do projeto Tango. O sprite de SVG no ir juntar todos os SVGs em um nico arquivo; em vez disso, um arquivo CSS com as imagens inline gerado. Por isso, evite gerar sprites de arquivos SVG muito grandes.

Note que feito fallback para a verso em PNG; caso o navegador no tenha suporte, uma verso alternativa ser carregada. Para que voc possa usar o SVG, preciso ter o Modernizr disponvel em sua pgina com a opo Misc > SVG disponvel. O uso do sprite igual ao que j fizemos antes.

O Spriteful tambm possui uma opo para quem trabalha com projetos Rails; essa opo permite que voc exporte os sprites do diretrio app/assets/images/sprites, salvando os arquivos de CSS em app/assets/stylesheets/sprites, tudo devidamente integrado com os helpers de Asset Pipeline. Para us-la, basta utilizar a opo --rails.

Primeiro, copie o template original com o comando spriteful template --format=scss. Isso irr gerar um arquivo spriteful.scss contendo as marcaes eRB. Agora, basta alterarmos o template para que ele exporte o arquivo com as marcaes de pseudo-elemento.