Fatal编程技术网
  • sass/
  • Sass 在Zurb基础上设置衬垫'；s按钮混合

Sass 在Zurb基础上设置衬垫'；s按钮混合

sass zurb-foundation

Sass 在Zurb基础上设置衬垫'；s按钮混合,sass,zurb-foundation,mixins,Sass,Zurb Foundation,Mixins,我想用基金会的。文档中的格式示例如下： // 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, fal

我想用基金会的。文档中的格式示例如下：

// 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无法编译SCS，错误为：
未定义操作：“0.625rem 0.3125rem乘以2”

如果我只通过了
rem计算（10）
。在基金会的大多数其他区域，可以以这种方式传递多个值。例如，查看我传递半径值的方式：左上角和右下角=5，右上角和左下角=0

有人能想出一个解决这个问题的办法吗？这可能是一个混合错误，但在我尝试解决如何修复它之前，我想确定这不仅仅是我的愚蠢

问题在于，您试图将$padding参数设置为一个包含两个值的列表，@mixin button获取此列表并尝试使用它进行操作，但返回一个错误，因为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
问题是，您试图将$padding参数设置为具有两个值的列表，@mixin button获取此列表并尝试使用它进行操作，但返回错误，因为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
正如@Parhum所说，您不能将列表用作此mixin的
$padding
参数，因此我修改了我的一个mixin，将列表支持添加到button mixin。Button mixin导入Button size mixin以处理按钮填充，因此您需要编辑Button size mixin以添加对使用列表作为
$padding
参数的支持

这是我的

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

  • 一个单个值适用于所有4个面
  • 两个值应用于1。顶部和底部以及2。左侧和右侧
  • 三个值应用于1。顶部，2。右侧和左侧，以及3。底部
  • 四个值应用于1。顶部，2。右侧，3。底部和4。左侧
所以
@include按钮大小（$padding:value）
返回：

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

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

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

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

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

@包含按钮大小（$padding:value1-value2）
返回：

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

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

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

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

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

@包含按钮大小（$padding:value1 value2 value3）
返回：

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

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

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

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

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

@包含按钮大小（$padding:value1 value2 value3）
返回：

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

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

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

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

padding-top: value1
padding-rigth: value2
padding-bottom: value3
padding-left: value4
比例
我为box size mixin添加了另一个参数，名为
$proportion
，默认情况下它设置为true，如果将其设置为true，则会删除填充操作

因此
@包含按钮大小（$padding:value1 value2 value3 value4，$proportion:）
返回：

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

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

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

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

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
如何在粉底中加入此混合物

  • 用您喜爱的编辑器打开fundation/components/_buttons.scs，并用此编辑器替换
    @mixin button size

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

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

    这是我的

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

    • 一个单个值适用于所有4个面
    • 两个值应用于1。顶部和底部以及2。左侧和右侧
    • 三个值应用于1。顶部，2。右侧和左侧，以及3。底部
    • 四个值应用于1。顶部，2。右侧，3。底部和4。左侧
    所以
    @include按钮大小（$padding:value）
    返回：

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

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

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

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

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

    @包含按钮大小（$padding:value1-value2）
    返回：

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

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

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

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

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

    @包含按钮大小（$padding:value1 value2 value3）
    返回：

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

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

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

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

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

    @包含按钮大小（$padding:value1 value2 value3）
    返回：

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

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

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

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

    padding-top: value1
padding-rigth: value2
padding-bottom: value3
padding-left: value4
    比例
    我为box size mixin添加了另一个参数，名为
    $proportion
    ，默认情况下它设置为true，如果将其设置为true，则会删除填充操作

    因此
    @包含按钮大小（$padding:value1 value2 value3 value4，$proportion:）
    返回：

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

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

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

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

    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
    如何在粉底中加入此混合物

  • 用您喜爱的编辑器打开fundation/components/_buttons.scs，并用此编辑器替换
    @mixin button size

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

    • 首先感谢您编辑我的答案：）但关于您的解决方案，我认为最好不要编辑核心文件（核心文件）