混合逻辑

Question

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

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

1. 我希望mixin能够接受有效的基于字符串的属性，例如“auto”或“inherit”
2. 我希望只能声明nessecary的参数数量。例如。如果我只需要一个保证金，那么我只想写一些像.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);
}

任何帮助都会很棒。

Answer 1

1）想要阻止它进行auto * 16的数学运算？不可能，除非他们在我没看的时候插入if / else控制语句。防护是您检查参数类型的唯一方法。这意味着同一mixin的多个声明可以涵盖您的所有基础。虽然，你可以让mixin调用其他mixins ......

2）也不可能。将您最有可能留下的参数作为默认值放在最后。在您的示例中，在nope上输入0没有任何好处，因为您的参数的3/4上的默认值为0。