CSS to Sass: Converting an Existing Site

Posted By: Landau17
CSS to Sass: Converting an Existing Site

CSS to Sass: Converting an Existing Site
MP4 | Video: 720p | Duration: 2:31:46 | English | Subtitles: VTT | 688.2 MB

Sass is next-gen CSS. Many developers are already using this timesaving technology to style their new web projects. But what about existing sites? By converting the way the CSS is authored—using Sass instead of plain CSS—you can realize the benefits of Sass on older websites. Converting an existing site is also a great way to learn Sass and understand how Sass is compiled into CSS.

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.

Topics include:
  • 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