Join John Riviello for an in-depth discussion in this video Next steps, part of CSS to Sass: Converting an Existing Site.
- View Offline
- Exercise Files
- Thank you for joining me for…CSS to Sass, Converting an Existing Site.…I hope you've enjoyed it as much as…I enjoyed creating it.…From here, I'd recommend checking out…PostCSS: First Look with Ray Villalobos…so you can add even more processing power to your CSS…in addition to what we've already set up with Autoprefixer.…If you'd like to learn more about using Sass…to build a responsive website,…check out Responsive CSS with Sass and Compass…also by Ray Villalobos.…As I mentioned in the lesson on using a Mixin library,…most of Compass' Mixins and functions are available…in the Compass MixIns NPM module.…
So you can still use most of Compass'…functionality with Libsass.…To learn more about Sass,…check out the teamSass community page on Sass' website.…And since eyeglass is still in active development,…I'd also recommend keeping an eye on the repose…in the GitHub organization.…Now get out there, and go change your CSS to Sass.…
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
Skill Level Intermediate
Responsive CSS with Sass and Compasswith Ray Villalobos3h 22m Intermediate
Design the Web: Pie Charts with CSSwith Chris Converse25m 33s Beginner
1. Getting Started
2. Creating Core Variables and Mixins
3. Useful Sass Tools
Use a mixin library4m 58s
4. Applying What We've Learned
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.