Question

正如标题中所述，我正在寻找关于mixin中extend和LESS之间差异的明确解释。

代码示例＆amp;现场演示（即在codepen.io上）非常受欢迎。

Answer 1

在存在差异之前，深入研究mixins和extend是什么

非常重要

<强>混入

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

Mixins最终非常强大，你可以定义一个公共规则集，比如.bordered，并将它混合到你想要镶边的所有元素中。这些可以帮助您保持代码干燥，并在页面上更改边框元素的样式，您只需要在一个地方进行更改。

mixins的另一个定义功能是你可以在同一个规则集中使用多个mixin。

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

此功能基本上允许您的代码像您一样灵活。定义一堆mixins并将它们组合起来以获得所需的UI / UX。

最后，mixins也可以定义为带参数的函数，所以你可以有类似

的东西

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

你刚刚扩展了＆＃39;通过将规则集继承到标题并添加自己的规则来.black-text的行为。

结果CSS将是：

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

TL; DR - Extend和Mixin之间的差异

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

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

注意 - 这个答案绝不是最全面的答案，因为mixins和extend的概念相当广泛。了解该用法的最佳位置是LESS文档。