LESS 中 Mixin 的使用及其区别解析-JavaScript中文网-JavaScript教程资源分享门户

LESS 是一种 CSS 预处理器，它提供了许多便捷的语法和特性，其中之一就是 Mixin。Mixin 是自定义函数的一种形式，它可以帮助我们避免重复的样式代码，并且为我们提供更好的组件化和抽象能力。

Mixin 的定义和使用

Mixin 可以看做是一个代码片段，它可以接受传入的参数并生成对应的样式。例如，下面这个例子定义了一个名为 border-radius 的 Mixin：

.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

这个 Mixin 接受一个参数 @radius，然后根据这个参数生成三个不同浏览器的圆角样式。我们可以在样式中使用这个 Mixin，并传入对应的半径值：

.button {
  .border-radius(4px);
  background-color: #f00;
}

上面这个样式代码中，.button 元素同时拥有了边框圆角和红色背景色。

除了 Mixin，LESS 还提供了 Extend 继承语法，会让人产生混淆。Extend 是一种用来共享样式的方式，它基于样式选择器进行匹配，将共同部分抽离成一个公共的样式。例如，下面这个例子将 .alert 元素的样式定义为公共样式：

// javascriptcn.com 代码示例
.alert {
  font-weight: bold;
  color: #c00;
}

.success-alert {
  &:extend(.alert);
  color: #090;
}

在上述代码中，我们可以看到 &:extend(.alert); 将 .alert 的样式继承过来，从而避免了重复定义。

然而，Mixin 和 Extend 实际上有很大区别。Mixin 可以接受参数并生成对应的样式，更加具有灵活性和可复用性；Extend 则是复用已有样式，其本身不具备业务逻辑。

除了接受传入的参数外，Mixin 还可以设置参数的默认值，这样当没有传入对应参数时，会使用默认值进行计算。例如，下面这个例子为边框设置默认值：

.border(@width: 1px, @style: solid, @color: #000) {
  border: @width @style @color;
}

这个 Mixin 中，所有的参数都设置了默认值，我们可以根据需要忽略某些参数：

.box {
  .border(2px, dotted)
}

这个示例中，我们只传递了前两个参数，最终生成的样式是 border: 2px dotted #000;。

LESS 中的 Mixin 看起来很像函数，它们都拥有参数和返回值。但是它们之间还是有很大的区别的：Mixin 返回的是一段样式代码，可以直接嵌入到 CSS 样式中；而函数则返回一个值，只能用于计算并生成其他样式。

希望本文对你的 LESS 使用

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652a17737d4982a6ebc75826