Join John Riviello for an in-depth discussion in this video Solution: Create high-DPI sprites with Eyeglass and include-media, part of CSS to Sass: Converting an Existing Site.
- So let's take a look at how I was able…to solve this challenge.…The first thing I considered was whether to add…to the existing sprite image, or to make a new one…just for high DPI displays.…Since it was most likely that the user would…only need to be served only one of the two images,…I went with creating a separate sprite map image.…The only case that both would need to be served,…is if the user had two monitors, one high DPI,…and the other a normal resolution,…and then originally viewed the page on one monitor,…and then moved the browser window…over to the other monitor.…That's an Edge case, and the browser will need…to do some work to adjust for that…difference in resolution anyway, so to me,…two separate images makes sense.…
So now that I've established that, here in the…Sprites.scss file, I'm going to copy or original sprite map,…and paste that in, and let's change this to a 2x one.…For the variable name the name here,…and make sure we update our path to images/social2x,…since that's where our images are,…
In these Sass tutorials, students will learn the benefits of libSass over the original Ruby Sass, and set up a Sass-friendly development environment with Node.js and Grunt. A unique aspect of this course is learning how to handle challenges specific to integrating Sass with an existing website, such as new debugging workflows and the variables and mixins worth the effort to define. Author John Riviello also introduces a few Sass tools that speed up media query handling, automatic browser prefixing, and sprite generation. At the end of the course, he shows how your setup work pays off, styling a whole new section of the practice site in just 15 minutes.
- Deciding between Ruby Sass or libSass
- Installing Node.js and Grunt-Sass
- Converting CSS to SCSS
- Creating core variables and mixins
- Abstracting units and values
- Applying advanced mixins
- Generating image sprites with eyeglass-spriting
- Creating high-DPI sprites
- Building new styles