-
-
Notifications
You must be signed in to change notification settings - Fork 79.1k
Closed
Labels
Description
your current set up is so:
.clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
.clearfix {
.clearfix();
}
consider switching to this:
.clearfix {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
.clearfix() {
&:extend(.clearfix all);
}
it will reduce the amount of resulting css when devs use your mixin in their own less files. There will still be some duplicate with .clearfix() calling both mixin .clearfix() and selector .clearfix (known issue with less.js, and I do wish you would change .clearfix() to .makeclearfix() or .addclearfix() or whatever to alleviate this problem, but I know you won't).
When the good fellas over at LESS do fix that problem, this code (combined with my suggested change)
.my-class {
.clearfix();
}
will result in:
.clearfix:before,
.clearfix:after,
.my-class:before,
.my-class:after {
content: " ";
display: table;
}
.clearfix:after,
.my-class:after {
clear: both;
}
.my-class {
color: blue;
}
and of course if a dev uses .clearfix(); throught their own less files, the resultant compiled css will see a pretty significant reduction in size
Reactions are currently unavailable