@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:
$ 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:
...
> 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%:
$ 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.