web-dev-qa-db-ja.com

SASSを使用して単一の引数としてリストをミックスインに渡します

SASSを使用して、ブラウザ間の互換性を高めるのに役立つミックスインを作成するのが好きです。次のようなmixinを作成します。

_@mixin box-shadow($value) {
    box-shadow: $value;
    -webkit-box-shadow: $value; 
    -moz-box-shadow: $value; 
}
_

このようなものを渡すことができます：

_@include box-shadow(inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f);
_

結果は次のようになります。

_box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px #ff800f;
-moz-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px #ff800f;
-webkit-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px #ff800f; 
_

ただし、コンパイラーはmixin 3引数を渡そうとしていると考えるため、これは機能しません。 box-shadowは可変数のコンマ区切りビットを使用するため、box-shadow($1,$2,$3)のようなmixinを定義することはできません。

渡してみた

_@include box-shadow("inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f");
_

コンパイルしましたが、実際にはスタイルをレンダリングしませんでした。

これを解決する方法に関するヒントはありますか？

sass
45
Oliver

可変引数

ミックスインが未知の数の引数を取ることが理にかなっている場合があります。たとえば、ボックスシャドウを作成するためのミックスインは、引数として任意の数のシャドウを取ることができます。これらの状況に対して、Sassは「可変引数」をサポートします。これは、残りのすべての引数を取り、リストとしてパッケージ化する、ミックスイン宣言の最後の引数です。これらの引数は通常の引数と同じように見えますが、その後に...が続きます。次に例を示します。

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

経由： http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variable_arguments

70
rzar

SASS 3.1以下

注：SASS 3.2+を使用している場合、rzarが示唆するように可変引数機能を使用します。

次のように、mixin自体で文字列補間を使用します。

@mixin box-shadow($value) {
  -webkit-box-shadow: #{$value};               // #{} removes the quotation marks that
  -moz-box-shadow: #{$value};                  // cause the CSS to render incorrectly.
  box-shadow: #{$value};
}

// ... calling it with quotations works great ...
@include box-shadow("inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f");

チップライアンに感謝します。

35
Joshua Pinter

文字列補間を使用する

@include box-shadow(#{"inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px #ff800f"});
14
Ryan

これを行うには多くの方法がありますが、最良の方法は次のようなミックスインを使用することです：

_@mixin box-shadow($value...) {
  -webkit-box-shadow: $value;               
  -moz-box-shadow: $value;                  
  box-shadow: $value;
}
_

そして、このようにそれを含めます：

@include box-shadow(inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6));

または

_@mixin box-shadow($value) {
      -webkit-box-shadow: #{$value};               
      -moz-box-shadow: #{$value};          
      box-shadow: #{$value};
}
_

そして、このようにそれを含めます：

_@include box-shadow("inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6)");
_

または：

_@mixin box-shadow($value) {
      $value: unquote($value);
      -webkit-box-shadow: $value;               
      -moz-box-shadow: $value;          
      box-shadow: $value;
}
_

または：

_@mixin box-shadow($value) {
  -webkit-box-shadow: $value;               
  -moz-box-shadow: $value;                  
  box-shadow: $value;
}
_

そして、このようにそれを含めます：

_@include box-shadow((inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6)));
_

Sassは非常に強力です:)

4
Shannon Hochkins

mixinを呼び出すときに引数名を使用して値を渡すこともできることを指摘したい：

@mixin shadow($shadow: 0 0 2px #000) {
    box-shadow: $shadow;
    -webkit-box-shadow: $shadow; 
    -moz-box-shadow: $shadow; 
}

.my-shadow {
  @include shadow($shadow: 0 0 5px #900, 0 2px 2px #000);
}

scssのスコープは$shadowは、後で再び使用した場合でも、ミックスイン値を保持します。あまり信じないが、このシナリオでは再割り当てに苦しむ

2
Doug Lee

これはコンパイルされません：

+box-shadow(inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6))

これはコンパイルします：

+box-shadow((inset 0 1px 0 #FFD265, 0 0 0 1px #912E01, 0 0 0 7px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .6)))

つまり、影のコンマ区切りリストの周りに括弧を追加すると、動作するはずです。

+box-shadow( (myshadow1, myshadow2, ...) )
0
Panagiotis Panagi