在 Less 中，混合（Mixin）可以接受参数，这使得混合更加灵活，能够适应不同的情境。混合参数可以用于传递值，从而在混合内部使用这些值来生成样式。以下是一些关于混合参数的基本用法：

基本参数：
// 定义带参数的混合
.rounded-corners(@radius) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

// 使用混合并传递参数
.my-element {
  .rounded-corners(10px); // 传递半径为 10px
}

.another-element {
  .rounded-corners(20px); // 传递半径为 20px
}

在这个例子中，.rounded-corners 混合接受一个参数 @radius，并在样式中使用这个参数来设置边框半径。在使用混合时，通过传递不同的参数值，可以产生不同的效果。

默认参数值：

你还可以给混合参数设置默认值，当调用混合时没有提供参数时，将使用默认值。
// 定义带默认参数值的混合
.rounded-corners(@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

// 使用混合，不传递参数
.my-element {
  .rounded-corners; // 使用默认半径值
}

// 使用混合，传递参数
.another-element {
  .rounded-corners(10px); // 传递半径为 10px
}

在这个例子中，.rounded-corners 混合的参数 @radius 设置了默认值为 5px。在使用混合时，如果不传递参数，将使用默认的 5px 半径；如果传递参数，将使用传递的值。

Less 的混合参数让你能够更灵活地重用样式，并根据需要定制样式的外观。


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