Question

我浏览了LESS文档，但示例比我需要的更复杂。

基本上我只是想创建一个可以接受参数的border-radius属性，就是这样。

目前我正在写这样但它不起作用：

.border-radius(val) {
    border-radius(val);
}

我正在我的座位中调用它。

.style {
  .border-radius(50%);
}

有没有人试图做这样的事情并取得成功？任何建议都会很棒。感谢。

Answer 1

Mixins也可以接受参数，这些参数是混合在一起时传递给选择器块的变量。

例如，使用4px默认值：

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

以下是我们如何将其混合到各种规则集中的方法：

#header {
   // Will get the 4px default value
  .border-radius;
}
.button {
  .border-radius(6px);
}