Join John Riviello for an in-depth discussion in this video Using the exercise files, part of CSS to Sass: Converting an Existing Site.
- The Exercise Files for this course are available for both premium and regular members. To access the files you need to download them from the course page, download the ZIP file, then extract the folder somewhere easy to find, maybe on your Desktop or Documents folder. The Exercise Files are organized by chapter and within each chapter there are subfolders named for the lesson it corresponds to. Each lesson's folder contains all the assets you will need to follow along throughout the lesson, as well as the final folder with the fully completed version. Let's take a look at how the folders are structured within the Exercise Files.
Now you certainly don't have to use the same file or folder names as me, but you now at least can understand why I've laid out the folders this way. Feel free to apply the same basic structure to your own projects.
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