@mixin clearfix {
*zoom: 1;
&:before,&:after {
display: table;
content: "";
// Fixes Opera/contenteditable bug:
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
line-height: 0;
}
&:after {
clear: both;
}
}
我们在我们的风格中使用它：
.class-example {
@include clearfix();
. . .
}
在编译成CSS之后,SASS将mixin的所有内容复制到我们使用mixin的每个类中.因此,它是大量重复的代码.我们使用mixin大约100次,所以在css中大约有1000个额外的行.
所以,问题是：哪个是更好的表单性能/支持/可读性等.观点看法
>使用mixin并允许重复的代码
>创建类.clearfix并在标记中使用它,如< span
class =“example-class clearfix”> …< / span>避免重复
解决方法
为了便于阅读和表现,这可能是明显的赢家.我没有任何支持溢出的数据：隐藏实际上比clearfix更快,但如果确实如此,我不会感到惊讶.但它的CSS要少得多,所以它绝对是下载数据的赢家.
虽然你的布局可能会有一些相对的定位,但并不总是可以使用overflow：hidden.在这些情况下,最佳性能方法是为.clearfix创建一个全局类,并将其应用于所有应该清除其子项的元素.虽然它听起来不易于维护,但我认为在整个CSS中包含mixin更容易维护,因为无论何时进行更改,都不必清除缓存的CSS.
我的建议是使用overflow：hidden和.clearfix.废料@include clearfix.
理由是你不能总是只使用一种方法(有时你可能想要使用：after元素用于其他方法,有时你可能希望内容在其容器之外伸展),所以无论如何都要有两种方法.
有了这两种方法,您就可以适应任何场景.只记得你可以绑定溢出：隐藏到一个类名,使其像DRY一样保持.clearfix.
我2¢.
编辑：
或者,但也许不是理想情况下,您可以使用@extend来创建这样的输出：
.element-1,.element-2,.element-3,.element-4,.element-5 {
// clearfix stuff
}
因此,clearfix是在一个地方而不是在文档中多次定义的.就个人而言,我不是它的忠实粉丝,但也许这对你有意义.
