Less 中基于变量的 Mixin 守卫答案

【问题标题】：Mixin guards in Less based on variablesLess 中基于变量的 Mixin 守卫
【发布时间】：2015-12-16 04:46:50
【问题描述】：

我正在尝试在 less 中创建一个高度可定制的按钮 mixin。例如，我希望客户能够进入他们的 .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(...) 来做到这一点

【问题讨论】：

除了 Harry 的回答之外，请注意 mixins 可以相互重用（也就是说，如果 .btn for medium size 与默认的只有一个属性不同，它可以只设置该属性，然后只需调用默认的.btn 来设置其他）。因此，这完全取决于您使用这些 mixin 实际设置的属性。
@Harry 是的，这太完美了，抱歉这个周末我不在笔记本电脑旁，所以无法查看
@Zach：没关系。不用担心。我只是在检查你是否在寻找额外的东西:)

标签： css less mixins less-mixins

【解决方案1】：

是的，像所提供的那样构建 mixin 的效率有点低，因为必须在多个 mixin 中重复相同的样式。

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

方法一（使用警卫）：

正如您在此处看到的，公共属性仅在父 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;    
  }  
}

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

这是一种替代方法，如果用户提供的值超出允许值列表，则在编译期间将引发错误。这是因为我们使用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;    
}

【讨论】：