Sass @extend Performance Bottleneck

If you are pre-processing your stylesheets with Sass, compilation time is critical for fast iterations. I’m currently working on a medium-scale project with a total Sass compilation time of more than 145 seconds:

1
2
3
$ time rake assets:precompile RAILS_ENV=development
rake assets:precompile RAILS_ENV=development \
  140.12s user 5.03s system 98% cpu 2:26.90 total

Obviously, this is detrimental for the team’s productivity. Therefore, I set out to improve the situation. As it turns out, there’s a performance bug in Sass >= 3.2, having a major impact on the @extend syntax.

Fortunately, we are not using @extend a lot in our codebase. That being said, I tried to replace just 4 out of 14 occurrences with @includes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
...
    > li {
       > a.btn-orange, &.current > a.btn-orange {
-        @extend .btn;
-        @extend .btn-orange;
+        @include btn($white, $orange, $orange);
       }

       > a.btn-gray, &.current > a.btn-gray {
-        @extend .btn;
-        @extend .btn-gray;
+        @include btn($text-color, $white, $gray-light);

         margin-left: 10px;
       }
     }
...

To my surprise, the above change was enough to reduce compilation time by ~70%:

1
2
3
$ time rake assets:precompile RAILS_ENV=development
rake assets:precompile RAILS_ENV=development \
  40.29s user 4.15s system 98% cpu 44.947 total

45 seconds is still pretty bad, but still a major improvement.