混合和扩展之间的差异较小

Question

正如标题所说，我在寻找有关之间的差异明确的解释mixin，并extend在LESS。

代码示例和实时演示（即在codepen.io上）非常受欢迎。

Answer 1

在出现差异之前，重要的是深入研究什么mixins和extend存在

混合蛋白

混合是您定义的通用规则集，并且可以在其他任何规则集中使用它们。

.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混入我们认为合适的任何其他规则集中。

Mixins最终变得非常强大，因为您可以定义一个通用规则集（例如）.bordered，并将其混合到您想要边界的所有元素中。这些可以帮助您保持代码干燥，并更改页面中带边框元素的样式，您只需要在一个位置进行更改即可。

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-扩展和混合之间的区别

Mixins允许您以更通用的方式编写代码，其中可以包含标准的编码结构，例如分支和循环，以更灵活地生成CSS。这是可能的，因为mixin允许参数并且在它们允许时充当函数。

扩展允许您将一组静态属性从一个规则集继承到另一个规则集，并且可以使用自己的规则来扩展继承的规则集。

注意-就混合使用和扩展的概念而言，此答案绝不是最全面的用法。了解用法的最佳位置是LESS文档。