Convert an existing site to use Sass. Learn the benefits of libSass, discover how to set up a Sass-friendly development environment, and find how to debug Sass styles, create variables and mixins, and generate new Sass styles.
- View Offline
- I remember the first time I used Sass and how excited I was to share it with my coworkers. When I did, some shared my excitement, while others were concerned it would slow down development rather than speed it up. And all of us wondered how we could possibly integrate a game-changing tool like Sass into a large existing code base. I'm here today to how you that it's not only possible to convert a website from using CSS to using Sass, but with a little setup work upfront Sass can save a lot of development time in the long run. My name is John Riviello and I've been designing and developing websites professionally, for nearly two decades.
In this project base course, we'll cover installing and configuring Sass and then we'll take some exiting CSS code and convert it to Sass. We'll cover debugging techniques, so your development workflow doesn't slow down and explain what code from your original CSS is worth abstracting out into Sass variables, mix-ins and functions to speed up your development. Then, we'll cover some useful tools to handle media queries, browser prefixes and sprites. For our big finale, we'll take the Sass code we've written and leverage that to create the CSS for a whole new section of our sample website in under 15 minutes.
So let's get started in converting an existing site from 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