Join John Riviello for an in-depth discussion in this video Install or upgrade Node.js, part of CSS to Sass: Converting an Existing Site.
- View Offline
- In this video, we'll check if we already have Node.js…installed, and if so, what version,…and then we'll walk through the steps to install…or upgrade Node.js if necessary.…Some of the Node.js modules we'll be covering in this course…require at least version 0.12 of Node.js to work,…so it's important we're running at least that version.…You can check by opening terminal,…then when that opens up, we're going to run…node --version.…If you're running 0.10 or prior, you'll need to upgrade.…If you see a node command not found error,…then you don't have Node.js installed.…
The process for a new install is the same…as the upgrade process.…If you need to, go to nodejs.org and click…the button for the most recent stable version.…That will download the package to your computer,…then you can double click that,…and run through the installer.…Once the installation is complete, you can close out of it,…open up terminal again.…You'll need to open up a new window, so I'm going to close…this window out and then hit Command N to open…
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