WordPress 3.8, Sass adoptions and Roots Theme

WordPress has adopted Sass for preprocessing CSS starting in version 3.8. This is excellent news for developers who work on plugins and admin UI.

Considering Roots contains Bootstrap 3.x and it only includes LESS, I want to again bring up the discussion about using Sass/Scss for Roots theme in the future. With this functionality being integrated into WordPress, even a fix to work out the dependence on Ruby, having Roots Theme work with Sass in addition to LESS would be a really good idea and solidarity to WordPress’ future as well.

I’m sure a lot of developers including me would be happy to see a Sass fork of this that’s regularly maintained and supported by the same Roots Github account.


I thought about starting a fork for Bootstrap with SASS, I do prefer it over LESS as well. I never really got around to it though.

I would support and use it :slight_smile:

I also use SASS + Compass.

I’d like to have a Roots generator that would allow you to do things like:

  • choose a different CSS framework (e.g. Foundation)
  • choose a preprocessor (LESS/Sass)

In the meantime, if someone wants to maintain a Sass fork (@kalenjohnson) and keep it up-to-date with the Roots repo, we can put it under the Roots org.


Guess I’ve been called out. I’ll get on it this week :slight_smile:

@benword @kalenjohnson I’d be really interested in seeing a SASS/Compass fork of Roots using the official Bootstrap SASS fork. Is there any progress on this? I’d like to contribute if there’s one in progress.

Even moreso I’d like to see a fork using Foundation, but I know that’s a bit more work in keeping things up to date. I’ll have a look into that this weekend since I am a little more familiar with Foundation than I am with Bootstrap and I was planning on using one of them with Roots for a project in the next week.

How might a Roots generator work? I guess it would have to change CSS class names in templates depending on the option selected, to start.

1 Like

I set this up this morning: https://github.com/kalenjohnson/roots/tree/bootstrap-sass

Currently, it’s using grunt-contrib-sass, as grunt-contrib-compass does not read the json “files” option correctly, and compiling to app.css, not main.min.css. Not a big deal, as you could change this in the gruntfile and in the script.php file, but I wanted to keep it as similar to the stock Roots theme for the time being.

As Ben has mentioned, this is all hopefully temporary until some type of generator can be coded that will allow us to choose which pre-processor and potentially choose from different frameworks to use when starting development. I think we’re all still trying to figure out the best solution to that though.


@kalenjohnson’s roots-sass fork now lives under the Roots org:


Kudos to @kalenjohnson for creating this fork that turned into a cool repo and @ben for hosting it in the roots org. Maybe a bower config will be coming soon “wink”.

Wasn’t it you and I that were talking about the Bower branch on Github?

Yep! It was me. I was making a hint to @ben to consider the bower branch we were discussing. I have already applied that same methodology to a couple projects I am working on.

Any plans on updating the roots-sass fork to 7.0.0 soon? :smiley:
Thank you!

There’s a lag between when Roots is updated and when Roots Sass gets updated. Is this just an oversight or is someone else in charge of this?

@kalenjohnson’s baby :slight_smile: If anyone else wants to help maintain, let us know.

Yup I guess so. Not that I’ve had a lot of time to keep up with it, but I lost some steam since I haven’t used SASS in a long while, hah.

I’ll see if I can get it updated in the next couple days. Pull requests are welcome though :smile:

I created a 7.0.0 branch. Grunt is compiling and looks like all is good, including the font directory.

Could probably use some more testing, let me know if anything is off.

Welcome to Roots 7!


Thanks so much for your work Kalen! and infinite thanks to Roots Team, all of you are superstars!

1 Like

Here is my setups if someone finds it useful.

Using grunt-contrib-compass to compile SASS, and config.rb for settings, autoprefixer removed.
Includes font awesome and selectboxit.
Comment out if you don’t need them.