Join Morten Rand-Hendriksen for an in-depth discussion in this video Running Grunt and Sass for the first time, part of WordPress: Developing with Sass and Grunt.js.
- Thus far I have my sass-test project set up…and I've created this package file…that defines the parameters of the project.…Now I need to start planning what…I want Grunt to do with my test project,…and I kind of already know.…I want Sass to be able to go in and grab all the files…in the SCSS folder and convert them all…into a single CSS file,…so that I can actually display…that content in a regular browser.…In addition, I want to run a separate task…that watches this SCSS folder…for any kind of change to any of the contents inside it,…or adding of new files, or anything like that.…
And whenever there's a change,…meaning I go in and change one of the files…and then save it, I want Grunt to automatically run…the Sass task again, compile a new version of the CSS file.…That way I'll be able to go in and write my Sass code…or CSS code and then whenever I save Grunt runs the task,…creates CSS for me and I can preview it in my browser.…Knowing this I can see I have three packages…that need to be installed into my project.…
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