3

我在下面的 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;
  }
}
4

2 回答 2

1

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

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

于 2011-08-24T02:24:36.343 回答
0

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%)
}
于 2014-10-15T13:16:29.333 回答