3

以下のミックスインで複数の引数を渡します。CSSファイルの複数の場所からミックスインを呼び出しています。すべての引数を指定する必要がある場合もあれば、少数の引数のみを指定する必要がある場合もあります。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 に答える