SASS Mixin Arguments答案

【问题标题】：SASS Mixin ArgumentsSASS Mixin Arguments
【发布时间】：2011-10-31 05:42:45
【问题描述】：

我在下面的 mixin 中传递了多个参数。我从我的 CSS 文件中的多个位置调用 mixin；有时需要指定所有参数，有时只需要指定几个。 Ruby 允许您使用散列传递可选参数。在 SASS 中是否有这样的等价物，或者通过命名参数可以按任何顺序传递，并且可以省略具有默认值的参数这一事实来避免这种情况？

@mixin three-column-header-layout($background_color: #EEEEEE, $left_width: 25%, $mid_width: 50%, $right_width: 25%, $left_line_height: 40px, $mid_line_height: 40px, $right_line_height: normal, $column_height: 40px) {
  .wrapper {
    margin: 0 auto;
    width: 100%;
    overflow: hidden; 
  } 

  .middleCol {
    float: left;
    background: $background_color;
    height: $column_height;
    width: $mid_width;
    display: inline;
    line-height: $mid_line_height; 
  }

  .leftCol {
    background: $background_color;
    height: $column_height;
    width: $left_width;
    float: left;
    line-height: $left_line_height; 
  }

  .rightCol {
    background: $background_color;
    height: $column_height;
    width: $right_width;
    float: left; 
    line-height: $right_line_height;
  }
}

【问题讨论】：

标签： hash sass argument-passing named-parameters

【解决方案1】：

Sass 在 3.1.7 中唯一的数据结构是列表。

正如您所提到的，只有当所有未传递的参数都具有默认值时，您才能使用命名参数的任意组合来包含您的 mixin。

【讨论】：

【解决方案2】：

Sass 3.3 添加了映射数据结构，您可以将它们作为参数传递给 mixin，如下所示：

$options:
  ( background_color: red
  , right_width: 30%
  , left_width: 20%
  );

.foo {
  @include three-column-header-layout($options...);
}

但是请注意，也可以像这样指定参数（这可能是 3.2 的一项功能）：

.foo {
  @include three-column-header-layout($background_color: red, $right_width: 30%, $left_width: 20%)
}

【讨论】：