Join Morten Rand-Hendriksen for an in-depth discussion in this video Setting up Sass tasks, part of WordPress: Developing with Sass and Grunt.js.
- View Offline
- In the previous movie we created the framework…for the Grunt file and we also created this watch task.…Now we need to create the Sass task that will take…all of these SCSS files that are in the _sass theme…and convert them into a singular style.css file…that WordPress can use.…Now before we create the task,…let's just take a quick look at what the SCSS files…look like inside our new theme.…Let's scroll down here, you'll see the Sass folder.…If I open the Sass folder,…you can see as I've told you before,…that the Sass folder contains a bunch of what's…known as partials, which are individual small files…with a small bit of Sass inside.…
If we look at style.scss,…we can quickly see this is meant to be…the initial style file.…Here at the top we have the commented out section…that's required for WordPress to recognize this…as a theme.…And all the license information.…Then we have a table of contents…for all the different components.…And then we have a long list of these at import calls…that call different folders and different files…
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