- Sass is an extension languagefor CSS that allows you to write CSSusing tools like variables,nesting, partials, mixins,and operators.Of these, I'd say that variables and mixinsare the tools with the most immediateand visible impact compared to writing standard CSS.Rather then writing a complex arrayof code again and again,say a font-family declaration like in this example,or the browser prefix markupfor border-radius like in this example.You can create a variable or mixinthen just provide the variableor mixin name and the values,and Sass will render out the correct markup automatically.

However, for me it only makes senseto use a mixin in one of these examples,the font-family declaration.While it's common practice to use Sassand 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 topof what prefixes are currentlynecessary for browser support,and these change all the time.For another, it means you haveto remember a lot of complex mixin syntaxto write CSS properties that at some pointin 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 propertiesrather 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 propertythat currently needs vendor prefixingand adds these in after the CSS has been rendered.

So, while Sass is a pre-processing extensionthat produces CSS,Autoprefixer is a post-processing extensionthat changes the CSS before it's published.In this course I'll show you howto automate a process that uses Sassfor all the sassy stuff,and Autoprefixer to handle vendor prefixingafter the CSS has been generated.This'll be a lot easier to maintain,and ensures that you don't haveto remember complex custom mixinsfor properties that willeventually become fully supported.

You can learn more about Sassand how to get the most out of thisextension language by watchingResponsive 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.

Resume Transcript Auto-Scroll

Author

Released

4/28/2015

If you want to use CSS, and less of it, when building WordPress themes or plugins, you should be using Sass. Sass is the adopted and widely supported CSS compiler for WordPress, which allows you to use variables, mixins, and nesting to write simpler code. In this course Morten Rand-Hendriksen covers practical workflows for incorporating Sass into the development of a WordPress theme, along with Grunt.js, a task runner that translates Sass code into browser-friendly CSS. First Morten walks the viewer through a full production setup, including implementation of version control, Grunt.js, Ruby, and Sass on Windows and Mac. Then he'll present practical workflows for developing a custom theme (based on the _s or Underscores theme) with Sass and shipping "pure CSS" versions to the public.

Note: This course doesn't teach Sass itself. To learn more about the language, watch CSS with LESS and Sass.

Skills covered in this course

Course Retiring Soon

WordPress: Developing with Sass and Grunt.js will be retired from the lynda.com library on March 29th, 2019. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion.

Continue Assessment

You started this assessment previously and didn't complete it. You can pick up where you left off, or start over.

Start My Free Month

Start your free month on LinkedIn Learning, which now features 100% of Lynda.com courses. Develop in-demand skills with access to thousands of expert-led courses on business, tech and creative topics.