A question regarding Sass & Gzip

gistfile1.md

About Sass and Gzip

Hey guys! I have a question regarding Sass usage and Gzip compression. If anyone knows something, be sure to share. :)

A quick reminder

It's good practice to use Sass @extend rather than including mixins when possible because of the way Sass handles @extend. To put it simple, it doesn't take the CSS content from the extended selector to place them in the extending one. It works the other way around: it takes the extending selector and append it to the extended selector.

Placeholder

%p { color: red; }
.a { @extend %p; }
.b { @extend %p; }

Output:

.a, .b {
  color: red;
}

Mixin

@mixin m { color: red; }
.a { @include m; }
.b { @include m; }

Output:

.a { color: red; }
.b { color: red; }

The question

Now it is common knowledge that Gzip works best on repeated strings. The more a string is repeated, the better the compression. At least that's what I know from Gzip.

Knowing this, wouldn't it be better for final file size to use mixins rather than placeholders?

I'm applying this question to a Sass context, but that basically can be translated to: is DRY really the best option when it comes to file size?

@davidtheclark

Also, the artificiality of this test probably magnified the efficiency-difference significantly (the differences between real stylesheets using the occasional mixin or extend would not be nearly so large).

I don't think so. Gzip works in blocks, so if you use mixins occasionally it wouldn't pick up the duplicates ('cause they are spread over multiple blocks) resulting in even bigger compressed files than your test files (especially if you have used the same mixin multiple times in succession, causing them to land in the same block).