Join Morten Rand-Hendriksen for an in-depth discussion in this video Using Sass for what it's best at, part of WordPress: Developing with Sass and Grunt.js.
- Sass is an extension language for CSS that allows you to write CSS using tools like variables, nesting, partials, mixins, and operators. Of these, I'd say that variables and mixins are the tools with the most immediate and visible impact compared to writing standard CSS. Rather then writing a complex array of code again and again, say a font-family declaration like in this example, or the browser prefix markup for border-radius like in this example. You can create a variable or mixin then just provide the variable or mixin name and the values, and Sass will render out the correct markup automatically.
However, for me it only makes sense to use a mixin in one of these examples, the font-family declaration. While it's common practice to use Sass and often mixin libraries, like Bourbon, to handle browser prefixing of modern CSS3, Sass is not the best tool for that job. For one, you have to constantly stay on top of what prefixes are currently necessary for browser support, and these change all the time. For another, it means you have to remember a lot of complex mixin syntax to write CSS properties that at some point in the not too distant future, won't need vendor prefixes.
Because this prefixing is a temporary problem, you should, at least in my opinion, learn the syntax of the actual properties rather than that of a mixin library. This is where you have to make a decision. Do you use Sass for everything? Or, do you use Sass for what it's best for, and other tools when they are better? I encourage the latter option every time. And in the case of vendor prefixing of CSS3, there is a better tool, called Autoprefixer. Autoprefixer finds any CSS3 property that currently needs vendor prefixing and adds these in after the CSS has been rendered.
So, while Sass is a pre-processing extension that produces CSS, Autoprefixer is a post-processing extension that changes the CSS before it's published. In this course I'll show you how to automate a process that uses Sass for all the sassy stuff, and Autoprefixer to handle vendor prefixing after the CSS has been generated. This'll be a lot easier to maintain, and ensures that you don't have to remember complex custom mixins for properties that will eventually become fully supported.
You can learn more about Sass and how to get the most out of this extension language by watching Responsive CSS with Sass and Compass by Ray Villalobos, and CSS with LESS and Sass by Joe Marini, both courses right here in the lynda.com library.
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