Automate SVG Sprite Background Image Variations with a SCSS Mixin

[00:00] Let's start by adding an I element to our HTML, and I'll give it a class of icon, and icon-plug. Also add another icon, the class is star, and another with a class of umbrella. Now, I'll just make some space, I'll add each icon again, this time I'll ad a class of icon-small.

[00:27] In our CSS, let's target the icon class, and I'll add a width and a height of 3em. Since the I element by default is in the inline element, the height doesn't have any effect, so let's add display:inline-block so both the width and the height will be respected.

[00:50] Next, I'll add a background image, then in the URL function I'll paste a link for my SVG sprite. I'll add a background-repeat of no-repeat, and I'll add a background-size of cover. This ensures that the background image will fill the allotted space for each icon.

[01:12] Next, I'll target icon-small and set its width and height to 2em. Let's set up a list by writing $icons, and passing a list of plug, star, umbrella to match our icons in our HTML. For each icon in the list, we want to generate a selector and modify its background-position property, so we'll use an each loop by writing @each $icon in $icons.

[01:49] That just means for every icon in our icons list, we're going to do something to it. Inside the each, let's store a reference to the index of the iteration that is currently being processed by writing $index, and setting that to the index function.

[02:06] We'll pass it the icons list, and we'll pass it the icon that we're currently on, and I'm going to subtract 1. I'm adding -1, because Sass loops start at 1, but we want our outputted code to start at 0You'll see why in a little bit.

[02:23] Next, let's set up a selector for each specific icon by writing icon -- and the interpolation tag, which is a # followed by curly braces, and inside the braces we can use the icon variable set up in our each loop here to print out the icon name from the icons list.

[02:46] Now, we'll open the selector and add a background-position. The X value is always going to be 0for the Y value, let's add another interpolation tag. We need the Y coordinate to be the negative value of this icon's index multiplied by the height of the icon.

[03:06] If you recall, each icon is stacked on top of each other in the sprite, so we'll need to pull the image up so the correct icon will be displayed inside the allotted space. Inside this tag let's write -index, multiplied by 3em. Let's go ahead and add our small variation. I'll add a parent selector, and I'll say icon-small, we use the same background position function from above.

[03:35] This time we'll change 3em to 2em to match the small width and height. Notice we're using 2em widths as well as 3em in a couple of places. Let's remove this duplication setting up a variable, and just say default-size:3em, and small-size:2em. Now, we can replace all instances of 3em with default-size, and all instances of 2em with small-size.