Yesterday I wanted to get deeper in Sass by trying Sassc. Sassc is a wrapper for Libsass and Libsass is a Sass compiler build in C++. The project was created and announced by Hampton Catlin (creator of Sass).

Why Libsass?

The official release of Sass is written in Ruby and it will continue to grow as a Ruby project. But Ruby is generally slow and not only for web frameworks: it’s the same problem for command line programs. At Moovweb, they decided to try porting Sass with C++ and get the best speed on large compilation ever. They succeed. The goal of Libsass is to be 1:1 equivalent to the normal version of Sass (in Ruby). Today, some features are missing like placeholders and SASS_PATH. Have a look to the current issues.

UPDATE 10 Feb 2023

10 years after this post, I just saw that Libsass is now deprecated in favor of Dart Sass. From the official website:

LibSass is an implementation of Sass in C/C++, designed to be easy to integrate into many different languages. However, as time wore on it ended up lagging behind Dart Sass in features and CSS compatibility. LibSass is now deprecated—new projects should use Dart Sass instead.
But it was a good ride and I've learned a lot working on Libsass in 2013. Sass is still alive and stronger than ever before.

Installing Sassc

The README is well documented, but there are the steps.

  • Clone the project:
git clone git@github.com:hcatlin/sassc.git
  • Update submodules:
cd sassc/
git submodule init
git submodule update
  • Compile:
make

Now, you have access to the ./bin/sassc binary. What I do is linking this in my PATH:

sudo ln -s $(pwd)/bin/sassc /usr/bin/sassc

Installing Bourbon

The Bourbon install is technically a simple copy/paste of the app/assets/stylesheets folder in your sass project (for standalone usage). The Bourbon mixins has a little problem that I patched in this pull request yesterday. It was immediately merged in the official repo. The last gem on Rubygems is old (April 2013) so I recommend you to use the Github repo.

  • Clone the repo:
git clone git@github.com:thoughtbot/bourbon.git
  • Copy the mixins to your sass folder:
cp -R bourbon/app/assets/stylesheets /path/to/my/sass/bourbon
  • You now have a bourbon/ folder in your sass project and to use Bourbon’s mixins, just import it:
@import "bourbon/bourbon";

Running some examples

The best way to understand the benefit of Sassc is to test it against real project. I have a project (more than 5000 lines of sass) that was using Compass but it became very slow at compilation: 6 secs. I decided to stop using Compass and just go with Bourbon. This was the first big win. From 6 secs to 2 secs. This is the compilation of the main.scss file with classic Ruby Sass:

time sass src/css/core/main.scss # 1,51s user 0,28s system 81% cpu 2,188 total

Now, with sassc executable:

time sassc src/css/core/main.scss # 0,07s user 0,02s system 34% cpu 0,244 total

Near 10x faster for my project: from 2200 ms to 250 ms guys. Wow.

Why speed matter?

Performance could not be a problem on production servers because you can scale it. Even with the slow Ruby interpretor you can scale with cache and tricks. That’s not working with Sass and command line applications. It’s hard to scale your local machine and it’s unnecessary to make complex API’s or services to “just compile a file”. Libsass is the answer and it has real effect on your workflow. I use LiveReload (with Grunt and grunt-contrib-watch) and I’m a huge fan of designing in the browser. I don’t spend to much time in Photoshop and I start using Sassc, Bourbon and LiveReload. You have the power of the language, the speed of C++ and the live refresh in your browser for a direct visualization of your work. Just try it.

Please contribute to Libsass or Sassc

I’m not a C/C++ guy but I really want to learn more because Libsass matter and I wish I could help. If you can’t directly patch Libsass for the open issues, please contribute elsewhere. For example: submit a pull request for updating the whole test suite. This is important to have a clean test suite for all cases and try to be 1:1 with the Sass specs. You can submit issues on Github with clean explanation and the community will try to figure this out and patch it. I saw the future of Sass in Libsass.

I hope this post can help you to try Libsass because the installation is easy and I didn’t have any troubles on my OSX 10.8.3.