Question

我尝试创建一个可以高度自定义的按钮mixin。例如，我希望客户端能够进入他们的.less文件并写下：

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

现在在.btn(...)混音中，我试图弄清楚如何正确地融入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(...)

来做到这一点

Answer 1

是的，构建像所提供的mixins一样效率有点低，因为必须在多个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（使用模式匹配）：

这是一种替代方法，如果用户提供的值超出允许值列表，则在编译期间将抛出错误。这是因为我们正在利用pattern matching作为转换。

.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;    
}

Mixin在Less基于变量保护

1 个答案: