在 Zurb Foundation 的 Button mixin 上设置填充

Question

我正在尝试使用 Foundation 的 Button Mixin。文档中的格式示例是这样的：

// Using the available options
.custom-button-class {
  @include button($padding, $bg, $radius, $full-width, $disabled, $is-input);
}

所以我是这样使用它的：

@include button(rem-calc(10 5), $colour-main-orange, em-calc(5 0), false, false, false);

但是通过 rem-calc(10 5) 作为填充失败。 Compass 无法编译 SCSS 并出现错误：Undefined operation: "0.625rem 0.3125rem times 2"

如果我只通过 rem-calc(10) 就可以了。在 Foundation 周围的大多数其他区域中，可以通过这种方式传递多个值。例如，查看我传递左上角和右下角 = 5 以及右上角和左下角 = 0 的半径值的方式。

任何人都可以想办法解决这个问题吗？这可能是一个混合错误，但在我尝试解决它之前，我想确保不仅仅是我愚蠢！

Answer 1

正如@Parhum 所说，您不能将列表用作此mixin 的$padding 参数，因此我修改了我的一个mixin 以将列表支持添加到按钮mixin。按钮混合导入按钮大小混合以处理按钮填充，因此您需要编辑按钮大小混合以添加支持以使用列表作为$padding 的参数。

这是我的mixin

工作原理
使用此 mixin，您可以将 $padding 设置为一个值、单个值的列表或 2、3 或 4 个值的列表，此列表遵循 css 填充简写规则：

• 一个单个值适用于所有 4 个面
• 两个值适用于1.顶部和底部以及2.左侧和右侧
• 三个值适用于1.顶部、2.左右和3.底部李>
• 四个值适用于1.顶部、2.右侧、3.底部和4. 左侧

所以@include button-size($padding: value) 返回：

padding-top: value
padding-right: value * 2
padding-bottom: value + rem-calc(1)
padding-left: value * 2

@include button-size($padding: value1 value2) 返回：

padding-top: value1
padding-right: value2 * 2
padding-bottom: value1 + rem-calc(1)
padding-left: value2 * 2

@include button-size($padding: value1 value2 value3) 返回：

padding-top: value1
padding-right: value2 * 2
padding-bottom: value3 + rem-calc(1)
padding-left: value2 * 2  

@include button-size($padding: value1 value2 value3) 返回：

padding-top: value1
padding-rigth: value2 * 2
padding-bottom: value3 + rem-calc(1)
padding-left: value4 * 2

比例
我在 box-size mixin 中添加了另一个参数 $proportion，它默认设置为 true，如果您将其设置为 true 值，它会删除填充操作。

所以@include button-size($padding: value1 value2 value3 value4, $proportion: ) 返回：

padding-top: value1
padding-rigth: value2
padding-bottom: value3
padding-left: value4

代替：

padding-top: value1
padding-right: value2 * 2
padding-bottom: value3 + rem-calc(1)
padding-left: value4 * 2

如何在基础中包含这个 mixin

1. 用你最喜欢的编辑器打开fundation/components/_buttons.scss，用mixin替换@mixin button-size

2. 将$proportion:false 添加到@mixin button 参数和@include button-size 参数中

Answer 2

问题是您试图将 $padding 参数设置为具有两个值的列表，@mixin 按钮获取此列表并尝试对其进行操作但返回错误，因为 sass 不支持列表操作。来自 Sass 参考：

列表不支持任何特殊操作。相反，他们是 使用列表函数进行操作。

基金会使用此代码设置您发送给他们的 $padding。看这段代码：

padding-top: $padding;
padding-#{$opposite-direction}: $padding * 2; // $padding list and * operator returns an error
padding-bottom: $padding + rem-calc(1); // This also return an error
padding-#{$default-float}: $padding * 2; // This also return an error