Join John Riviello for an in-depth discussion in this video Generate image sprites with eyeglass-spriting, part of CSS to Sass: Converting an Existing Site.
- View Offline
- With eyeglass spreading properly…configured in our grunt file,…it's now time to actually generate…the CSS and images for our sprites.…Open up Sublime Text…and then go to the assets…styles.scss file.…We'll be putting the sprite logic…in its own partial,…so let's include a link to that partial…right here after bourbon.…At import,…we'll call this sprites and a semicolon.…Save that.…Now let's create the partial,…so right-click the sass folder.…Choose New File.…
We'll save this as _sprites.scss.…And click there and press enter.…Again, I'm using a leading underscore…to indicates it's a partial…because we want this file to be imported…and not generate its own CSS file.…So for the logic for this file,…we're going to practically copy…byte for byte the logic in the quick start…of eyeglass spritings readme.…So I head over to the GitHub page,…which is at github.com/sass-eyeglass/eyeglass-spriting,…scroll down a bit,…and you'll see this quick start section here.…
We're going to copy the first example.…So we'll select it and see a copy…
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