read

When I created the HTML and CSS of FORVM about half a year ago, I stumbled over a bug in Compass, that made it impossible to me to create a retina icon sprite, that was exactly twice the size of the standard sprite image. Using two folders, icon and icon-retina, the image order was completely messed up and I didn’t know why.

Some time ago I reused parts of the old code base and asked myself, why I didn’t post about that issue before. On default, Compass creates vertically aligned images. But with just two lines of code, you can force horizontal images, which will appear in correct order.

$icon-layout:horizontal;
$icon-retina-layout:horizontal;

Side note: On FORVM I used self-developed code to show either standard or retina images. Nowadays I stick to easier solutions like presented on Bourbon.io.

Marco Raddatz

Marco Raddatz

Published

Image
Marco Raddatz #TechnicalProjectManagement #SoftwareDevelopment #Berlin Back to Overview