Less 中基于变量的 Mixin 守卫

Question

我正在尝试用 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
}

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

来做到这一点

Answer 1

是的，像所讨论的那样构建 mixins 有点低效，因为必须在多个 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;    
}

Less 中基于变量的 Mixin 守卫

Mixin guards in Less based on variables

css

mixins

less

less-mixins