- So now we're able to compile SCSS to CSS…with Node Sass with the help of Grunt Sass.…But if we have to manually run that Grunt Sass command…each time that's going to slow down our development process…because I guarantee you will make a change to your Sass file…and forget to compile it…and then go to your browser…and wonder why you're not seeing your change…and eventually you'll hopefully realize…that you forgot to compile your Sass file.…So let's avoid that by setting up a watcher…that will watch our SCSS files…and compile them to CSS whenever we edit them.…To install the watcher we'll go back to the Terminal,…and run npm install…grunt-contrib-watch…- -save-dev.…
So as you can tell from the name having contrib in it…this plugin is maintained by the Grunt team.…Once that is installed…let's go back to Sublime Text and edit our Grunt file.…First we'll load the plugin…after the current grunt-sass plugin,…so we'll add grunt.loadNpmTasks,…grunt-contrib-watch.…And then we'll add it to configuration…after the Sass config.…
Author
John Riviello
Released
2/12/2016In 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
Duration
Views
-
Introduction
-
Welcome1m 19s
-
Using the exercise files1m 56s
-
-
1. Getting Started
-
Set up your environment4m 7s
-
Install or upgrade Node.js1m 21s
-
Install Grunt-Sass5m 19s
-
Configure Grunt-Sass4m 42s
-
Convert CSS to SCSS7m 24s
-
Debug generated CSS8m 25s
-
-
2. Creating Core Variables and Mixins
-
Create color variables3m 45s
-
Use color variables6m 55s
-
Install csscss2m 5s
-
Mixins worth creating6m 33s
-
Create advanced mixins4m 44s
-
Apply our advanced mixin5m 57s
-
-
3. Useful Sass Tools
-
Use a mixin library4m 58s
-
-
4. Applying What We've Learned
-
Going Further
-
Next steps52s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press 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.
Share this video
Embed this video
Video: Speed up development with Grunt Watch