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?
The gzip size only matters for the delivery over network. The device has to parse the uncompressed file, just keep that in mind too.
I think that something like this:
can be parsed faster than
because in the above style the properties only have to be parsed once. Sure this is an extreme micro optimisation but I just want to point in that direction too.