边框半径Sass Mixin

Question

我使用了2个Mixins来设置圆角边框：

// When the Input is 1 Variable
@mixin border-radius($pixel) {
  border-radius: $pixel;
}

// When the Inputs are 4 Variables
@mixin border-radius-s($tl, $tr, $br, $bl) {
  border-top-left-radius: $tl;
  border-top-right-radius: $tr;
  border-bottom-right-radius: $br;
  border-bottom-left-radius: $bl;
}

我正在尝试找到一种方法将这些mixin合并为一个！可能需要使用if else语句来处理输入。我已经尝试过了，但是没有找到好的可行解决方案。

有人可以帮助我吗？

- Mini John

---

公平地说，你不需要在border-radius前加前缀，而且你肯定不支持需要供应商前缀的浏览器（参见支持表）。这基本上只会浪费你所有客户端的带宽。 - Fabrício Matté

我的问题是如何将两个mixin合并成一个：）。我正在尝试找到一种方法，让我可以编写@include border-radius(3px)，输出将是border-radius: 3px，如果我编写@include border-radius(3px, 2px, 3px, 2px)等。 - Mini John

我是指除了你指出的事实之外 :) - Mini John

哦，好的，我的评论只是旁注。没有那些混乱，你的代码看起来更加清晰了。让我们看看，你基本上想要重载mixin以接受1个或4个参数。 - Fabrício Matté

这正是我想要做的事情 =) - Mini John

Answer 1

你可以像文档中所示，设置mixin接受值的列表。

@mixin border-radius($pixel...) {
  border-radius: $pixel;
}

- Scimonster

---

这给了我一个输出 border-radius: 1px, 2px, 3px, 4px。对于盒子阴影来说可能不错，但对于需要其他变量的边框半径来说就不行了。 - Mini John

@include border-radius(10px 5px 20px 10px); 对我有效，+1。 - Fabrício Matté

哦，我错过了逗号= p.. 谢谢 - Mini John

虽然在这种情况下不使用前缀与不使用mixin是一样的。只是提醒一下。 - Fabrício Matté