2

我正在尝试创建一个高度可定制的按钮混合。例如，我希望客户能够进入他们的 .less 文件并写入：

.my-button {
    .btn(@bg: #FFF, @font: "", @color: #000, @size: 'large'...);
    ...
}

现在在我的.btn(...)mixin 中，我试图弄清楚如何正确地合并 Less mixin 守卫来做我想做的事情。

我猜我可以写这样的东西：

.btn(@bg: #FFF, @font: "", @color: #000, @size: 'large'...) {
    // All of my styling here
}

.btn(@bg: #FFF, @font: "", @color: #000, @size: 'large'...) when (@size = 'medium') {
    // All of my styling here BUT with new edits for 'medium' sizing
}

但这对我来说似乎非常低效和多余。有没有更好的方法来允许真正可定制的 mixin，但又不让客户端进行多次 mixin 调用？我真的希望能够通过调用来做到这一点.btn(...)

4

1 回答 1

4

是的，由于必须在多个 mixin 中重复通用样式，因此像所提供的那样构建 mixin 的效率有点低。

有几种方法可以避免重复，下面提供了它们。

方法1（使用警卫）：

正如您在此处看到的，公共属性仅在父 mixin 中指定一次，并且仅依赖于大小的属性在警卫中提供。这种方法的缺点是，当大小的值超出支持的值列表时，mixin 不会从受保护区域输出任何内容，也不会引发任何警告。这是因为 Less 编译器会在未找到匹配项时默默地跳过保护区域，并且当最终用户对 Less 代码一无所知时可能会出现问题。

.my-button-large {
    .btn(@font: "Arial");
}
.my-button-medium {
    .btn(@bg: #000, @font: "Calibri", @size: "medium");
}
.my-button-small {
    .btn(@bg: #777, @font: "Verdana", @size: "small");
}

.btn(@bg: #FFF, @font: "", @color: #000, @size: "large"){
  background-color: @bg;
  font-family: @font;
  color: @color;
  & when (@size = "large"){
    font-size: 24px;
    padding: 12px;
    line-height: 24px;
  }
  & when (@size = "medium"){
    font-size: 18px;
    padding: 8px;
    line-height: 18px;    
  }
  & when (@size = "small"){
    font-size: 12px;
    padding: 4px;
    line-height: 12px;    
  }  
}

方法2（使用模式匹配）：

这是另一种方法，如果用户提供的值超出允许值列表，则在编译期间将引发错误。这是因为我们使用模式匹配来充当开关。

.my-button-large {
    .btn(@font: "Arial");
}
.my-button-medium {
    .btn(@bg: #000, @font: "Calibri", @size: "medium");
}
.my-button-small {
    .btn(@bg: #777, @font: "Verdana", @size: "small");
}

.btn(@bg: #FFF, @font: "", @color: #000, @size: "large"){
  background-color: @bg;
  font-family: @font;
  color: @color; 
  .bg-size(@size);
}
.bg-size("large"){
  font-size: 24px;
  padding: 12px;
  line-height: 24px;
}
.bg-size("medium"){
  font-size: 18px;
  padding: 8px;
  line-height: 18px;    
}
.bg-size("small"){
  font-size: 12px;
  padding: 4px;
  line-height: 12px;    
}
于 2015-09-19T05:21:46.877 回答