Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Automate SVG Sprite Background Image Variations with a SCSS Mixin


    n this lesson, you’ll learn how to write a SCSS mixin to generate styles for variations of background-images. We’ll look at using SCSS lists to interpolate dynamic class names and property attributes and output icons at different sizes.

    If you need the ability to add or edit icons on a regular basis, having a SCSS mixin do the heavy lifting of calculating background-position, background-size and creating selectors will save you lots of time and manual work.

    Note: this lesson assumes you have an understanding of SCSS, mixins and already have a process to compile SCSS.