Join Morten Rand-Hendriksen for an in-depth discussion in this video Testing the setup, part of WordPress: Developing with Sass and Grunt.js.
- Here we are, at the moment of truth.…I've set up my Sass task,…which should produce two files under the compiled folder.…One called style.css,…which is an expanded version of my style sheet.…One called style-min.css,…which is a compressed version.…Ok notice I've put it under the compiled folder for now,…because I want to make sure I'm not breaking anything.…So I've created a new folder and stashing my files there.…Alright, I'm gonna try to run Grunt now…and see if everything I've set up works properly.…So just to remind you, what happens is…when I run Grunt, we're running the default task.…
The default task triggers watch.…Watch looks at the entire project…and finds any file with the extension .scss.…If it finds any changes to any of those files,…meaning we saved one of the files…or added a new one,…then it runs the Sass task.…The Sass task in turn runs two tasks.…The first one, dev, creates an expanded CSS file…that's based on sass/style.scss,…and is compiled down and put under compiled/style.css.…The distribution task creates a compressed CSS file…
Note: This course doesn't teach Sass itself. To learn more about the language, watch CSS with LESS and Sass.
- Setting up your development environment
- Installing Node.js, Ruby, Grunt, and Sass
- Setting up Grunt and Sass on Mac and Windows
- Adding support to Grunt, Sass, Watch, and Autoprefixer in WordPress
- Building custom themes with _s and Sass