LESS中mixin和extend之间的区别

Question

LESS中mixin和extend之间的区别

cssless

3

如标题所述，我正在寻找有关LESS中mixin和extend之间区别的清晰解释。

欢迎提供代码示例和实时演示（例如在codepen.io上）。

- Adriano

1

很抱歉，这个问题对于SO来说太过宽泛了。请从http://lesscss.org/features/开始了解。简而言之，`extend`只是将当前选择器附加到要“扩展”的选择器列表中，而mixin则将其内容扩展到您调用它的规则集中。因此，总的来说，当涉及到静态CSS属性的简单继承时，`extend`更有效（因为它产生更紧凑的结果），而mixin是更通用的编程语言工具，能够做任何`extend`无法做到的事情（因为mixin的内容不限于静态CSS属性）。 - seven-phases-max

对我来说，这似乎有点宽泛。从根本上讲，Mixin 和 Extend 是不同的。在 Less 中，任何 CSS 类本身都是 Mixin，当您在另一个类中调用 Mixin 时，它应用相同的属性但不会合并选择器。Extend 会合并选择器。 - Harry

就在我写了一个很长的答案时，问题必须被关闭。 叹气 - Achrome

@seven-phases-max和Harry：是的，说得对。在阅读了更多的LESS官方文档之后，似乎这是一个相当广泛的问题。不过我总是喜欢stackoverflow上“简明扼要”的答案和“通过实例解释”的答案。 - Adriano

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Achrome · Accepted Answer

在讲述区别之前，了解一下 mixins 和 extend 是什么非常重要。

Mixins

Mixins 是通用的规则集合，您可以定义并在任何其他规则集合中使用它们，例如：

.highlighted-text {
  color: #CCCCCC;
}
.normal-text:hover {
  .highlighted-text;
  font-size: 14px;
}
.another-text {
  .highlighed-text;
}

这将编译为：

.highlight-text {
  color: #CCCCCC;
}
.normal-text:hover {
  color: #CCCCCC;
  font-size: 14px;
}
.another-text {
  color: #CCCCCC;
}

我们刚才做的是将我们定义的规则集.highlighted-text混合到我们认为适合的任何其他规则集中。

混合在其中的一大特点是您可以定义一个通用的规则集，比如.bordered，并将其混合到您想要有边框的所有元素中。这有助于您保持代码的DRY，并且要在页面上跨多个带边框的元素更改样式，您只需要在一个地方进行更改即可。

Mixin 的另一个突出特点是您可以在同一个规则集中使用多个 mixin。

.bordered {
  border: 1px solid black;
}
.rounded {
  border-radius: 5px;
}
.bordered-and-rounded {
  .bordered;
  .rounded;
}

这个功能基本上允许您的代码像您所希望的那样灵活。定义一堆mixin并将它们组合起来，以获得您想要的UI/UX。

最后，mixin也可以定义为带有参数的函数，因此您可以拥有类似以下内容的东西：

.translucent(@opacity) {
  opacity: @opacity;
}
.medium-translucence {
  .translucent(0.5);
}
.high-translucence {
  .translucent(0.25);
}

扩展

扩展的工作方式与面向对象编程（OOP）非常相似。您定义一个父规则集，并建立继承链以继承相同的样式。考虑以下示例：

.black-text {
  color: #000000;
}
.title {
  &:extend(.black-text);
  font-size: 24px;
}

您刚刚通过继承规则将.black-text的行为“扩展”到标题，并添加了自己的规则。

结果的CSS将会是：

.title {
  font-size: 24px;
}
.black-text,
.title {
  color: #000000;
}

TL;DR - Extend 和 Mixin 的区别：

Mixin 允许您以更通用的方式编写代码，其中可以包含标准的编码结构，例如分支和循环，以更灵活地生成 CSS。这是可能的，因为Mixin 允许参数并在存在参数时像函数一样运行。

Extend 允许从一个规则集继承一组静态属性，并且您可以使用自己的规则增加继承的规则集。

注意 - 尽管 Mixin 和 Extend 的概念相当广泛，但本答案在用法方面并不是最全面的。了解用法的最佳方法是查看 LESS 文档。