0

我为边距创建了一个 LESS mixin，它接受多个数值并吐出带有 rem 测量单位和 px 后备的 css 值/属性对。

以下是我需要帮助的内容：

  1. 我希望 mixin 能够接受有效的基于字符串的属性，例如“auto”或“inherit”
  2. 我希望能够只声明必要的参数数量。例如。如果我只需要左边距，那么我只想写类似.margin(nope,nope,nope,1);.

这是我到目前为止所拥有的：

.margin(@sizeValueTop: auto, @sizeValueRight: 0, @sizeValueBottom: 0, @sizeValueLeft: 0) {
  @pxValueTop: (@sizeValueTop * 16);
  @remValueTop: (@sizeValueTop);
  @pxValueRight: (@sizeValueRight * 16);
  @remValueRight: (@sizeValueRight);
  @pxValueBottom: (@sizeValueBottom * 16);
  @remValueBottom: (@sizeValueBottom);
  @pxValueLeft: (@sizeValueLeft * 16);
  @remValueLeft: (@sizeValueLeft);
  margin-top: ~"@{pxValueTop}px"; 
  margin-top: ~"@{remValueTop}rem";
  margin-right: ~"@{pxValueRight}px"; 
  margin-right: ~"@{remValueRight}rem";
  margin-bottom: ~"@{pxValueBottom}px"; 
  margin-bottom: ~"@{remValueBottom}rem";
  margin-left: ~"@{pxValueLeft}px"; 
  margin-left: ~"@{remValueLeft}rem";
}

body{
  .margin(1,1,1,1);
}

任何帮助都会很棒。

4

1 回答 1

1

1）想要阻止它做数学auto * 16？不可能，除非他们在我不看的时候加入了 if/else 控制语句。守卫是检查参数类型的唯一方法。这意味着同一个 mixin 的多个声明来覆盖你的所有基础。不过，您可以让 mixins 调用其他 mixins...

2）也不可能。将您最有可能保留为默认值的参数放在最后。在您的示例中，由于您的默认值nope在您的参数的 3/4 上，因此输入没有任何优势。00

于 2012-10-03T11:59:24.563 回答