混合和扩展之间的差异较小 [英] LESS differences between mixin and extend

问题描述

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

As stated in the title, I'm looking for a clear explanation regarding the differences between mixin and extend in LESS.

代码示例&现场演示(即在 codepen.io 上)非常受欢迎.

Code examples & live demo (i.e. on codepen.io) are more than welcome.

推荐答案

在区别之前，深入研究mixins和extend是什么很重要

Before the differences, it is important to delve into what mixins and extend are

Mixins

Mixin是您定义的常见规则集，可以在其他任何规则集中使用它们，例如.

Mixins are common rule-sets you define and can use them in any other rule-sets, eg.

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

What we just did was mixing in of the rule-set we defined as .highlighted-text into any other rule-sets we deemed fit.

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

Mixins end up being very strong in that you can define one common rule-set, say .bordered, and mix it into all elements you want bordered. These help you in keeping your code DRY, and to change the styling of bordered elements across your page(s), you just need to change it at one place.

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

Another defining feature of mixins is that you can use multiple mixins in the same rule-set.

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

基本上，此功能使您的代码可以灵活灵活.定义一堆mixin并将其组合以获得所需的UI/UX.

This feature basically allows your code to be as flexible as you will make it. Define a bunch of mixins and combine them to get the UI/UX you want.

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

Finally, mixins can be defined as functions with parameters as well, so you can have something like

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

扩展

扩展的工作方式与OOP的工作方式非常相似.您定义父规则集，并建立继承链以继承相同的样式.考虑这个例子

Extend works in a very similar way as OOP works. You define a parent rule-set and you establish a chain of inheritance to inherit the same style. Consider this example

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

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

You have just 'extended' the behaviour of .black-text by inheriting the rule-set into title and adding a rule of your own.

结果CSS将为:

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

TL; DR-扩展和Mixin之间的区别

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

Mixins allow you to write code in a more generic way, wherein you can include standard coding constructs, such as branching and looping to generate CSS more flexibly. This is possible since mixins allow for parameters and behave as functions when they do.

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

Extend allows you to inherit a set of static properties from one rule-set to another and you can augment the inherited rule-set with rules of your own.

注意-答案绝不是最全面的用法，因为mixins和extend的概念相当广泛.了解用法的最佳地点是LESS文档.

这篇关于混合和扩展之间的差异较小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！