Border radius Sass Mixin

Posted 2023-03-06

【中文标题】Border radius Sass Mixin

【英文标题】：

【发布时间】：2014-07-07 20:39:00

【问题描述】：

当时我为我的边界半径使用了 2 个 Mixin：

// 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。我已经尝试过，但找不到任何好的工作解决方案。

谁能帮我解决这个问题？

【问题讨论】：

公平地说，你不需要前缀border-radius，而且你肯定不支持需要供应商前缀的浏览器（参见support table）。它基本上只是浪费所有客户的带宽。

我的问题是如何将 2 个 mixin 组合成 1 个 :)。我正在尝试为我找到一种写@include border-radius(3px) 的方法，输出将是border-radius: 3px，如果我写@include border-radius(3px, 2px, 3px, 2px) 等等。

我的意思是除了你指出的事实:)

哦，好吧，我的评论只是一个旁注。您的代码现在看起来更干净，没有那种混乱。 =] 好吧，让我们看看，你基本上想重载 mixin 以接受 1 或 4 个参数。

这正是我想要做的 =)

【参考方案1】：

您可以将 mixin 设置为接受值列表，如 in the docs 所示。

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

【讨论】：

这给了我border-radius: 1px, 2px, 3px, 4px的输出。对于盒子阴影，它可能很好，但对于我还需要其他变量的边界半径..

@include border-radius(10px 5px 20px 10px); 为我工作，+1

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

虽然，在这种情况下，不使用前缀，与不使用mixin是一样的。只是要注意。