在 Less 中，混合（Mixin）是一种用于组织和重用样式的机制。混合类似于函数，可以在样式表中定义一组样式规则，并在需要的地方调用它们。

定义混合：
// 定义混合
.rounded-corners(@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

// 使用混合
.my-element {
  .rounded-corners; // 使用混合，默认半径为 5px
}

.my-element-large {
  .rounded-corners(10px); // 使用混合，指定半径为 10px
}

在这个例子中，.rounded-corners 是一个混合，它接受一个可选的参数 @radius，默认值为 5px。在 .my-element 中使用混合时，将应用默认半径；在 .my-element-large 中使用混合时，将应用指定的半径。

混合的作用域：

混合的作用域决定了混合可以被访问的位置。默认情况下，混合是全局可见的。
// 全局混合
.rounded-corners(@radius: 5px) {
  border-radius: @radius;
}

.my-element {
  .rounded-corners; // 可以在全局范围内访问
}

.another-element {
  .rounded-corners; // 可以在全局范围内访问
}

命名空间混合：

可以使用命名空间来组织混合，以避免冲突。
// 命名空间混合
.my-mixins {
  .rounded-corners(@radius: 5px) {
    border-radius: @radius;
  }
}

.my-element {
  .my-mixins.rounded-corners; // 使用命名空间混合
}

在这个例子中，.rounded-corners 被定义在 .my-mixins 命名空间中，然后通过 .my-mixins.rounded-corners 的方式在 .my-element 中使用。

Less 的混合功能使得样式表更模块化，更易于维护和重用。


转载请注明出处：http://www.zyzy.cn/article/detail/4290/Less