Write simpler, smarter CSS for your WordPress themes and plugins with Sass and Grunt.js.
- Hi, I'm Morten Rand-Hendriksen, staff author here at Lynda.com, and this is WordPress: Developing with Sass and Grunt.js. Sass is a popular extension language to CSS that allows us to use things like variables and mixins, and partials, and nesting, to write simpler CSS. It's become really popular in the front-end web development community, and also in the WordPress community, and that's why you should learn how to use it. Now, the challenge with Sass is that you can't simply write Sass code, or SCSS code, and present it to the browser.
For the browser to understand it, we have to convert it to CSS. And in the WordPress community, the most common way of doing this is by using the Task Runner application known as Grunt. To start off, we'll look at Sass and Grunt and how to use these applications in the best possible way. Then, I'll show you how to install Sass and Grunt on both a Windows computer and a Mac. And finally, I'll walk you through the workflow of developing a new custom theme, from scratch, using Underscores and Sass and Grunt.js. Knowing how to use Sass and Grunt.js will greatly enhance the workflow of your custom theme development.
So, let's get crackin' with WordPress: Developing with Sass and Grunt.js.
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