SASS Mixin参数

Question

我在下面的mixin中传递了多个参数。我在我的CSS文件中从多个地方调用mixin;有时需要指定所有的args，有时只需要指定几个args。 Ruby允许您使用哈希传递可选的args。在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;
  }
}

Answer 1

Sass从3.1.7开始的唯一数据结构是列表。

如前所述，只有在未传递的所有参数都具有默认值时，才可以使用命名参数的任意组合包含mixin。

Answer 2

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

$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%)
}