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?
It’s all about authoring style and your preference. I have been leaning towards mixins recently because they can be used more predictably in different contexts and media queries, they don’t add as many selectors that might cause issues in IE, and they can be programmed to output slightly different results.
When I do use extend, it is usually wrapped in a mixin simply for consistency sake. It’s much easier to just write
@include
everywhere instead of trying to remember if I need to use an extend or a mixin. It is also easier to make changes to abstracted code after it is authored when it is contained in mixins.