Question

在我们的项目中，我们使用SASS进行样式开发。此外，我们使用Bootstrap，它包含下一个着名的mixin：

@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>等标记中使用它以避免重复

另外，如果有人有更好的解决方案 - 我会很高兴得到它。欢迎提出任何意见/讨论。

Answer 1

首先，我想提一下，将overflow: hidden应用于具有浮动子元素的元素会清除浮点数，就像包含您正在讨论的clearfix mixin一样。

为了便于阅读和表现，这可能是明显的赢家。我没有任何数据支持overflow: hidden实际渲染速度比clearfix更快，但如果确实如此，我不会感到惊讶。但它的CSS要少得多，所以它在下载数据方面绝对是一个赢家。

虽然您的布局可能会有一些相对定位，但并不总是可以使用overflow: hidden。在这些情况下，最佳性能方法是为.clearfix创建一个全局类，并将其应用于应该清除其子项的所有元素。虽然它听起来不易于维护，但我认为在整个CSS中包含mixin更容易维护，因为无论何时进行更改，都不必清除缓存的CSS。

我的建议是同时使用 overflow: hidden 和 .clearfix。废话 @include clearfix。

理由是你不能总是只使用一种方法（有时你可能想要使用：after元素用于其他方法，有时你可能希望内容在其容器外伸展）无论如何，两者都有意义。

使用这两种方法，您就可以适应任何情况。请记住，您可以将overflow: hidden绑定到班级名称，使其与.clearfix一样DRY。

我的2¢。

修改：

或者，但也许不是理想情况下，您可以使用@extend来创建这样的输出：

.element-1,
.element-2,
.element-3,
.element-4,
.element-5 {
  // clearfix stuff
}

因此，clearfix是在一个地方而不是在文档中多次定义的。就个人而言，我不是它的忠实粉丝，但也许这对你有意义。

Answer 2

就像其他人已经说过的那样，对于像这样的简单实用程序mixin，我将其定义为扩展名，如下所示：

%clearfix {
    //clearfix code
}

然后在SASS中使用它：

.container{
    @extend %clearfix;
}

这样，无论你扩展它多少次，它输出的代码只在CSS中出现一次，而不是数百次。

我会反对在标记中使用像clearfloat或clearfix这样的类，除非你非常需要 - 为什么当你可以用CSS更好更快地完成它时混淆了标记？您可以在SASS文件中的一个位置轻松更改它，而不是跟踪大量不同的标记文件。

这使您可以将所有内容放在一个地方，而不是在许多地方展开，这使得维护它变得更加容易，正如我从经验中所知道的那样。

Answer 3

我建议把它变成一个“助手”级别，因为你很好地说你的自己，它们更加灵活，你把它们放在需要的地方，根据情况也有不同的明确修正，有些是溢出修复有些是表格布局修复等等，我宁愿创建一个类并将它们添加到需要的地方，这也使得布局类独立于明确修复。所以他们可以像独立和可重复使用的代码一样生活，如果clearfix可能会弄乱潜在的布局，不必担心：）

我将它们用作类，以便更好，更灵活地进行布局。

编辑，所以我会说你的解决方案2号也是最好的，因为你没有说复制100行代码。

Answer 4

我在当前项目中使用bootstrap较少的文件，并且在mixins.less文件中有以下内容：

// UTILITY MIXINS
// --------------------------------------------------

// Clearfix
// --------
.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;
  }
}

我们可以定义所谓的“mixins”，它与编程语言中的函数有一些相似之处。它们用于将CSS指令分组到方便，可重用的类中。 Mixins允许您通过简单地将类名作为其属性之一将类的所有属性嵌入到另一个类中。它就像变量，但对于整个类。任何CSS类或id规则集都可以这样混合：

.container{
.clearfix();
}

就clearfix而言，我只是将它用作clearfix，因为它正在执行一个清除浮动的任务，即什么bootstrap提供一个类来获取特定任务。它独立于其他类。你可以在html中使用它：

<div class="clearfix"></div>

Answer 5

我建议使用mixin，不要担心性能非常小。将来，如果某些内容类型不再需要使用clearfix，则必须通过所有html删除标记。

保持标记清洁并在css中进行布局和样式始终更安全。在这种情况下，您将获得非常小的性能，以便在未来的支持方面节省自己。如果您将性能视为一个问题，您可能需要考虑如何设置标记或css，以便您没有那么多可以调用.clearfix的类。

Answer 6

首先！

我首先建议不要使用overflow：hidden。这是一个黑客攻击，因此将来会导致人们对代码混淆，特别是对于您应用此代码的任何企业的新人。还有一些JavaScript开发人员必须应对任何位置相关元素的影响。

那么在所有SASS中应用clearfix类或仅在SASS中应用包含的PROS和CONS是什么？

clearfix class

DOM元素上的

clearfix显示内容浮动到任何人，而不进一步查看。 clearfix样式只编写一次，使您的样式表文件更小。

@include clearfix

非常棒的人，让我们在所有地方使用包含，并扩展我们的样式表质量。可是等等！我确实找到了一个真正使用它的有趣机会，我会这样做。

如果您的类不在需要clearfix的模板中，那么在整个DOM中编写。我可以想象想要使用include选项。虽然这种情况相当罕见。

此外，由于在页面上进行响应式更改的类突然需要一个clearfix，您可以将其嵌入到一个漂亮的@import media（）中，例如使用bourbon neat。但即使这样也很少见，因为您可以再次应用clearfix并从一开始就完成它。

结论

我认为需要一种快乐的媒介，在编写SASS时应始终如此。但这是我个人的意见:-P

使用SASS mixin或创建单独的类更好？

6 个答案:

首先！

clearfix class

@include clearfix

结论