Join John Riviello for an in-depth discussion in this video Set up your envionment, part of CSS to Sass: Converting an Existing Site.
- View Offline
- When I'm writing code…there are two plugins I can't live without.…Git Gutter and proper syntax highlighting…for the language I'm working in.…Git Gutter shows an icon in the gutter area…to indicate if the line has been added, deleted or modified.…I find this incredibly useful…to keep track of what you're doing.…And as you're viewing this videos,…it will help you see what I've changed.…It's available for Sublime Text, TextMe, Vimm,…Emax and Xcode,…and Adam has a similar plug in called GetDef.…In this lesson, we'll go through how do we install…Git Gutter and a Sass Syntax highlighter for Sublime Text.…
To install these two plugins,…I'm first going to install a tool called Package Control…for Sublime Text.…This makes adding and removing packages much easier.…To install package control,…I'm going to go to their website at packagecontrol.io…and click on installation.…Then I will follow the simple instructions here on the left.…If these don't work for you for some reason,…then the manual instruction should work without a problem.…
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