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来为button mixin添加列表支持。按钮mixin导入按钮大小的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

<强>比例
我已经为名为$proportion的box-size mixin添加了另一个参数，默认设置为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

使用您喜欢的编辑器打开fundation / components / _buttons.scss，并将mixin

@mixin button-size

将$proportion:false添加到@mixin button个参数中并添加到@include button-size参数中

Answer 2

问题是你试图将$ padding参数设置为具有两个值的列表，@ mysix按钮获取此列表并尝试使用它但返回错误，因为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

在Zurb Foundation Button mixin上设置填充

2 个答案: