Stylus destructurable params mixin (margin-side: auto)

Question

如何创建具有可破坏参数的实用程序混合？就像在标准 css margin: inherit auto 中，第一个参数应用于顶部和底部，第二个参数应用于右侧和左侧，除非给出额外的参数。

margin-side(left, right)
  margin-left left
  margin-right right

.some-div
  margin-side auto
  // applied to both margin -left and -right

使用条件？休息参数？默认参数值？无法让它与其中任何一个一起工作..

// thus far I've done it with
margin-side(left, right) ...
margin-sides(both) ...
// but it's error prone

干杯，谢谢！

Answer 1

我不确定我是否理解你的问题。

我想这就是你想要做的：

margin-side(vertical, horizontal = vertical)
  margin-top vertical
  margin-left horizontal
  margin-right horizontal
  margin-bottom vertical

.foo
  margin-side(10px)

.bar
  margin-side(5px, 7px)

try it online

Stylus destructurable params mixin (margin-side: auto)

Stylus destructurable params mixin (margin-side: auto)

stylus