Cancel

Sarah Gooding

WordPress Core Adopts Sass CSS Preprocessor

Nearly a year ago, Chris Wallace proposed that the WordPress core adopt a CSS Preprocessor to help move admin UI CSS into the future. Including a CSS preprocessor allows developers to speed up tasks with the use of variables in stylesheets. Variables will make tasks like reskinning the WordPress admin a breeze. Wallace argued strongly for Sass in his ticket because of its relatively low barrier for entry, due to the fact that it follows the conventions of CSS at its core.

With the inclusion of MP6 finally a lock for WordPress 3.8, Helen Hou-Sandi reignited the discussion on CSS preprocessors by highlighting Wallace’s original ticket on the make.wordpress.org core development blog. After an epic debate of Sass vs. LESS, it seems that Sass has won out and will be adopted as WordPress’ CSS preprocessor moving forward.

photo credit: Cre8ive Commando
photo credit: Cre8ive Commando

Why Sass?

Proponents of Sass cited many reasons why it would be a better fit for WordPress than other CSS preprocessors. To quickly summarize the discussion, I’ve outlined just a few of the important arguments for a CSS preprocessor in general and for Sass in particular:

  • Allows for the use of variables to calculate layout widths, generate color schemes, font sizes, etc.
  • Reduces HTTP requests when stylesheets are combined into one
  • Easily minify generated CSS files in bundled versions of WordPress to speed up load times
  • Sass is GPL-compatible, licensed under the MIT license
  • Sass is backwards compatible with all versions of CSS
  • Sass supports more advanced logic – ability to include if/then/else and for/while/each statements

The main challenge with Sass is that it is dependent upon Ruby and the Sass Ruby gem. Efforts to sort out the Ruby dependency have landed on the use of grunt-sass, which allows for compiling .scss files without Ruby.

The inclusion of Sass capabilities in WordPress 3.8 will bring a bright new day for front-end developers who contribute to core. Are you excited about Sass use in WordPress? Or were you on the other side of the debate?

Category: ,
Tags: ,
27

27 responses to “WordPress Core Adopts Sass CSS Preprocessor”

  2. @Donna Fontenot – By the sounds of it, this is only for the admin css, which lives independently of any theme css / less.

    If you have a plugin that adds css to the admin, I imagine it will need to be updated for mp6 anyway, but I can’t imagine that there will be any conflict, given that SASS/LESS etc are all compiled to css before being used.

    Really, for end users and most developers, this change won’t affect you at all.

    :)

    Create forum topic from comment

  8. From the make/core discussion and for clarification, WP wouldn’t compile CSS on the fly. Sass files would be used in development, but all releases would have the actual complied CSS files. MP6 used this idea—from an user’s perspective, it is all CSS. Only if you’re a dev contributing to the project will the preprocessor be an issue.

    Create forum topic from comment

  9. @Jason Resnick – silent extends, for loops, conditional statements, sass syntax, dynamic code generation… In my opinion, SASS is one step closer to a scripting language than LESS is, and more familiar to both PHP programmers (in syntax) and those who don’t want to get into a preprocessor (with SCSS syntax).
    There is also no equivalent to COMPASS in LESS. Just like WP pretty much depends on jQuery, I see compass becoming an essential tool for extending the capabilities of the platform.
    @Ozh – It definitely is a dependency, but it won’t impact anyone downloading the package. Just like core is now in grunt, you don’t need NodeJS to run WP, and, like @Adrian said, the CSS from core will already compiled.

    I’m super excited for this and can’t wait to see if they open it up for plugins to hook into core variables and slim down the number of CSS files

    Create forum topic from comment

  14. @Jason Resnick – Yeah almost definitely. Just like jQuery, Compass is a huge library that you can find in most projects, it has a huge community behind it and really good docs. @Philip LaPier makes a good point on Bourbon, which is also awesome. I just think compass has more popularity behind it right now.

    Create forum topic from comment

  19. @ozh @sam less has the same dependency as grunt (node) but sass has an extra one, ruby. I thought it was hard to set up, but it isn’t. In the future (once sasslib is stable) ruby won’t be needed. (I don’t think core’s build is using sasslib yet, I didn’t check.)

    The build system is node/grunt, which was decided before/independently from the discussion of preprocessors. The choice of less/sass didn’t affect the adoption of node/grunt.

    The adoption of sass does impact contributors who are working on CSS patches, they’ll have to set up node (and ruby in the short term) but it won’t affect anyone else. I’ve tried to make the case that these are fairly entry level requirements for professional frontend devs, so it’s not too burdensome.

    My general sense of where the lead devs are at, is that if it turns out that installing node/ruby prevents contributions, they might abandon the preprocessor idea.

    Create forum topic from comment

  21. Is there a definitive guide to installing Sass for someone running Xampp on localhost, using Sublime editor and using Sass for the first time? I have all three installed, implemented all the Sublime plugins but still cannot get the Style.css file to save in the theme folder?

    Brother in law told me to look into Bones which apparently has their own method but it would be great if someone has THE definitive guide?

    Thanks ;)

    Create forum topic from comment

  22. @James – just go to The Sass Lang site for a guide on Sass installation. It’s not hard at all. Personally, I use Codekit for auto-compile on projects that I run through MAMP, but there are a myriad of different workflows (including the direct-in-browser capabilities of Chrome Developer Tools) available for working with Sass.

    Create forum topic from comment

  23. Like James I tried that with XAMPP and WP3.8, and it did not worked.
    How to get child theme .scss processed?

    If there is no dependency, SASS sheets should work out of the box, but they do not.

    Jen’s advice does not work, since I do not have to install anything else if there is no dependency, and SASS manual for Windows gives you “install ruby” instruction.

    Create forum topic from comment

  24. @James & @ommunist – if those tools are giving you trouble setting up, you can go straight into the command line.
    If you’re on a mac/linux installing sass is super easy. Open up your Terminal and use:
    gem install sass
    (you might have to do sudo gem install sass)
    If you’re on windows, you’ll need to install Command Prompt with Ruby, then run the command through that program

    Once you’re installed, you just cd to your working directory and compile your sass files with the ‘sass’ or ‘sass –watch’ commands as described here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#using_sass

    Have your theme enqueue the CSS files and you’ll be running smooth :D

    Create forum topic from comment

  25. This is very interesting news!

    I’m wondering. But if I’m a theme developer, and want to compile straight from server, is that going to be possible? in other words, I edit my .sass files, upload them to server, then WordPress will compile my .sass stylesheet and output the necessary .css stylesheet(s) to browser? or do I have still to compile everything locally then upload? I’d prefer the first case, seems more automatic to me… I do it already in less using wp-less, a plugin built on phpless

    Create forum topic from comment

You may also like

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.