Using sprites
Using CSS sprites can be extremely beneficial to your website's performance. In this page you'll learn how to use the advanced workflow to create and use CSS sprites.
What are sprites?
Sprites are basically large images composed out of smaller images. To understand it better, let me give you an example:
Let's say you have 1 logo and 30 icons to display in your page and they're all in .svg format. Using the normal method, which is to create an img tag for each one will essentially make 31 requests to the server. Those requests take time, seriously slowing down your page load time. So instead, we're gonna use CSS sprites and do the following:
- We'll combine all those images into a single, large image.
- We'll load that image in CSS as a background for each element (logo, icons, etc).
- We'll set the background size and position so it will appear just as if we loaded an image the normal way.
- The benefit is that we're now loading a single image instead of 31, therefore seriously decreasing the page load time and increasing performance.
How to work with sprites
Here's the sprite image used by Ascension:
There are 7 images placed there (some are semi-transparent so they're not visible over a white background). The corresponding CSS code (Sass in our case) looks like this:
.image {
font-size: 10px;
&:before {
content:' ';
vertical-align:middle;
display: inline-block;
background-image: url("../img/sprite.svg");
background-repeat: no-repeat;
background-size: 14em 36.6em;
.no-svg & {
background-image: url("../img/sprite.svg");
}
}
}
.image.icon-arrow-down {
&:before {
background-position: -1em -1em;
width: 2.4em;
height: 1.5em;
}
}
@mixin image-icon-arrow-down(){
@extend .icon-arrow-down;
}
.image.icon-arrow-down-light {
&:before {
background-position: -1em -4.5em;
width: 2.4em;
height: 1.5em;
}
}
@mixin image-icon-arrow-down-light(){
@extend .icon-arrow-down-light;
}
.image.icon-checkmark {
&:before {
background-position: -1em -8em;
width: 1.3em;
height: 1em;
}
}
@mixin image-icon-checkmark(){
@extend .icon-checkmark;
}
.image.icon-close-light {
&:before {
background-position: -1em -11em;
width: 2.4em;
height: 2.4em;
}
}
@mixin image-icon-close-light(){
@extend .icon-close-light;
}
.image.icon-person {
&:before {
background-position: -1em -15.4em;
width: 12em;
height: 12em;
}
}
@mixin image-icon-person(){
@extend .icon-person;
}
.image.icon-play-dark {
&:before {
background-position: -1em -29.4em;
width: 2.1em;
height: 2.1em;
}
}
@mixin image-icon-play-dark(){
@extend .icon-play-dark;
}
.image.icon-play-light {
&:before {
background-position: -1em -33.5em;
width: 2.1em;
height: 2.1em;
}
}
@mixin image-icon-play-light(){
@extend .icon-play-light;
}
Now, to use any of these images, I just create an i element with the class of .image and then the class of the actual sprite image I want to use.
<i class="image icon-arrow-down"></i>
Now, to create your own sprites you need to use the advanced workflow powered by Gulp. If you're doing that then the only step is to copy your .svg files into assets/img/sprites. Gulp will read the changes and will run those images through the sprites task, creating the sprite.svg file and the corresponding _sprites.scss partial file under assets/scss/components/.