CSS Symbol Sprite is a technique of mixing a number of pictures into one picture record to cut back HTTP requests and optimize web load performance. There are lots of tactics and to hand equipment to try this, or else you’ll be able to additionally do it historically with Photoshop.
However, via all my revel in of coping with CSS Symbol Sprite, there’s no opposite direction that a lot more uncomplicated than the usage of Sprite Function for Compass. So, let’s check out the way it works.
Earlier than operating with Compass codes, we want to create Compass mission watch it. So, each and every time there’s a exchange within the mission together with the photographs and the .scss, Compass will collect it into the correct shape.
Let’s open your Terminal or Command Recommended (if you’re on Home windows), and run the next instructions.
compass create /trail/to/mission
As we discussed above, you’ll be able to use Photoshop to manually sign up for the photographs or you’ll be able to additionally use some to hand equipment, akin to SpriteBox. Compass integrates this selection within the Serve as. Let’s say now we have the next icons below pictures/browsers/.png folders.
To enroll in the ones icons in Compass, we will be able to use @import rule after which direct it to the picture folders adopted by way of the picture extension in the course of the .scss stylesheet, like so
After saving the record, Compass will mix the ones pictures and generate new picture information, as follows.
Moreover, we will be able to additionally set the sprite orientation. As you’ll be able to see within the screenshot above, the photographs are organized vertically by way of default. In case vertical orientation does now not are compatible the instances, we will be able to direct them horizontally or diagonally with the next variable $