Join Morten Rand-Hendriksen for an in-depth discussion in this video What we are doing in this course, part of WordPress: Developing with Sass and Grunt.js.
- The goal of this course is to set up a functional development workflow for working with Sass when you develop WordPress themes. Why Sass, and not and less or some other CSS pre- or post- processor? Well, since were working with WordPress, it's a good idea to use the CSS pre-processor used by WordPress core, and that is Sass. Sass is a CSS extension language that allows us to write SCSS files with extended abilities like variables, mixins, and nesting, that are then pre-processed into regular CSS.
For any development workflow to work with Sass, you need to process your SCSS files through Sass into regular CSS. There're several different tools available to do this. Some are standalone, while others are part of a larger application. From my perspective, the goal of all workflows should be to make any kind of pre-processing or other background task into an automated event that just happens behind the scenes without you having to constantly monitor it. To this end, the workflow that will be covered in this course uses a task runner called "Grunt," to manage Sass pre-processing, and some other tasks.
In the WordPress community, Grunt is the most commonly used task runner, so learning how to use it will provide you with easier access to the community as a whole. Once set up, Grunt will handle all the background tasks, so all you have to worry about is writing the Sass itself. The rest will happen behind the scenes. With this in mind, the course breaks down as follows: In Chapter 1, I'll walk you through the preparatory steps; setting up a development environment, identifying what we are going to use Sass for, and understanding how Grunt will help us along the way.
In Chapters 2 and 3, I'll show you how to set up Grunt, Sass, and an autoprefixer on Windows and Mac respectively. Grunt is a command-line task runner that relies on the Node.js platform, while Sass is a ruby application. So on Windows, we have to install and configure both before we can get Grunt and Sass to work together. And finally, in chapter 4, we'll look at the workflow of using Sass in the development of a new theme. Here, will start with a Sass version of the popular underscores starter theme, and I'll show you how to set up Grunt, Sass, and Autoprefixer in the project to get everything running smoothly and automatically.
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