Hey guys! I have a question regarding Sass usage and Gzip compression. If anyone knows something, be sure to share. :)
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.
%p { color: red; }
.a { @extend %p; }
.b { @extend %p; }
Output:
.a, .b {
color: red;
}
@mixin m { color: red; }
.a { @include m; }
.b { @include m; }
Output:
.a { color: red; }
.b { color: red; }
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?
Scott, can you share your mixin that you use to extend placeholders? I am very very curious!
Hey Hugo, based on the above comment, I am guessing if they are both the same, then the only difference will be how long it takes to GZip each file. Not the amount of compression. Very curious to see if anyone knows the answer for this!