sass
ミックスイン

構文

• @mixin mixin-name ($argument1, $argument, ...){ ... }

mixinを作成して使用する

mixinを作成するには、 @mixin mixinディレクティブを使用します。

@mixin default-box ($color, $borderColor) {
    color: $color;
    border: 1px solid $borderColor;
    clear: both;
    display: block;
    margin: 5px 0;
    padding: 5px 10px;
}

ミックスインの名前の後にかっこで引数のリストを指定することができます。 $で変数を開始し、カンマで区切ってください。

別のセレクタでmixinを使用するには、 @includeディレクティブを使用し@include 。

footer, header{ @include default-box (#ddd, #ccc); }

ミックスインからのスタイルは、今で使用されるfooterとheaderの値で、 #cccのための$color変数と#dddのための$borderColor変数。

可変引数を持つMixin

ミックスインでは、使用中に単一または複数の引数が存在する場合があります。 border-radiusような単一の引数がある場合、 border-radius場合を考えてみましょうborder-radius:4px; border-radius:4px 3px 2px 1px;ような複数の引数border-radius:4px 3px 2px 1px; 。

従来のキーワード引数混合は以下のようになります：

@mixin radius($rad1, $rad2, $rad3, $rad4){
 -webkit-border-radius: $rad1 $rad2 $rad3 $rad4;
 -moz-border-radius: $rad1 $rad2 $rad3 $rad4;
 -ms-border-radius: $rad1 $rad2 $rad3 $rad4;
 -o-border-radius: $rad1 $rad2 $rad3 $rad4;
 border-radius: $rad1 $rad2 $rad3 $rad4;
}

ととして使用される

.foo{
    @include radius(2px, 3px, 5px, 6px)
}

上記の例は複雑で（コード化、読み込み、保守）、1つの値または2つの値だけを渡すことができない場合、エラーを投げ、 1つ、2つ、または 3つの値を使用するには、3つの他のミックスインを定義する必要があります。

変数Argumentを使用することで、引数の数をいくつでも心配する必要はありません。変数名は、 3つのドット（...）の後に変数名を定義して宣言することができます。以下に可変引数の例を示します。

@mixin radius($radius...)
{  
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
}

ととして使用される

.foo{
    @include radius(2px 3px 5px 6px)
}
.foo2{
    @include radius(2px 3px)
}
.foo3{
    @include radius(2px)
}

上記の例ははるかに簡単です（コード、メンテナンス、および読み込み）。引数の数が1つまたは複数であることを心配する必要はありません。

複数の引数があり、いずれの場合にも2番目の引数にアクセスするには、 propertyname : nth(variable_name, 2)記述しpropertyname : nth(variable_name, 2) 。

賢明なデフォルト

SASSでは、上書きしたいパラメータ以外のパラメータを省略することができます。 default-box例をもう一度見てみましょう：

@mixin default-box ($color: red, $borderColor: blue) {
    color: $color;
    border: 1px solid $borderColor;
    clear: both;
    display: block;
    margin: 5px 0;
    padding: 5px 10px;
}

ここでは、ミックスインが第2のパラメータを上書きした

footer, header{ @include default-box ($borderColor: #ccc); }

$borderColorの値は#ccc 、 $colorはredままです

オプションの引数

SASSのオプションの引数を使用すると、その値を指定した場合にのみパラメータを使用できます。それ以外の場合は無視されます。以下のmixinの例を見てみましょう：

@mixin galerie-thumbnail ($img-height:14em, $img-width: null) {
    width: $img-width;
    height: $img-height;
    outline: 1px solid lightgray;
    outline-offset: 5px;
}

だから、

.default { 
  @include galerie-thumbnail; 
}
.with-width { 
  @include galerie-thumbnail($img-width: 12em);
}
.without-height { 
  @include galerie-thumbnail($img-height: null);
}

単にCSSファイルに次のものを出力します：

.default {
  height: 14em;
  outline: 1px solid lightgray;
  outline-offset: 5px;
}

.with-width {
  width: 12em;
  height: 14em;
  outline: 1px solid lightgray;
  outline-offset: 5px;
}

.without-height {
  outline: 1px solid lightgray;
  outline-offset: 5px;
}

SASSは、値としてnullを持つプロパティを出力しません。これは、コールにオプションの引数を含める必要がある場合に非常に役立ちます。

@contentディレクティブ

ミックスインは、SASS準拠のコードのブロックを渡すことができ、それはmixin内で@contentディレクティブとして利用可能になります。

@mixin small-screen {
  @media screen and (min-width: 800px;) {
    @content;
  }
}

@include small-screen {
  .container {
    width: 600px;
  }
}

そして、これは出力されます：

  @media screen and (min-width: 800px;) {
    .container {
      width: 600px;
    }
  }

ミックスインは@contentディレクティブを使用することができ、引き続きパラメータを受け入れることができます。

@mixin small-screen($offset) {...