Join Morten Rand-Hendriksen for an in-depth discussion in this video Wiring up the theme for Sass, part of WordPress: Developing with Sass and Grunt.js.
- Alright let's do a quick recap of what we have so far.…We've created a Grunt file that has a Watch task.…The Watch task looks for any file with the extension .scss.…And whenever it finds a change through the file,…a new file added, or a file deleted,…it will run the Sass task.…The Sass task, in turn, has two subtasks.…The first one, dev, creates an expanded CSS file…based on the file it finds under sass/style.scss…and all its partials and places it…under the compiled folder in a file called style.css.…
Then the second task, dist, creates a compressed CSS file…based on the same file found under sass/style.scss…and its partials and places that inside compiled folder…and names it style-min.css.…We know that this works, the problem is right now,…what we're doing, is not affecting our theme…in any useful way.…That's because we're currently creating new style sheets…that are landing in the compiled folder…and that's not where WordPress will be looking…for the style sheet.…What we want to happen is for this compressed style.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