Scess強力Mixins指令

原文のリンクhttp://sass-lang.com/documentation/file.SASS_REFERENCE.菗デファイニングa_mixin
Mixinを定義します。

@mixin large-text {
  font: {
    family: Arial; //    font-family...
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

いくつかの歴史的なレガシーの問題のために、Mixinの名前は、文字と下線との互換性があります。つまり、large-textというmixinもこのように導入できます。個人的にはハイフンを使って名前をつけたり、変数を使ったりするのがオススメです。
Mixin:@includeを紹介します。

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

最後にコンパイルされた:

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

ミxinには、他のmixinも含まれていてもよい。

@mixin compound {
  @include highlighted-background;
  @include header-text;
}

@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

Mixinのパラメータ
MixinはSassScript値をパラメータとして伝えることができます。この値はincludeの時に指定されます。

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p { @include sexy-border(blue, 1in); }

コンパイルされた:

p {
  border-color: blue;
  border-width: 1in; //1in  1  
  border-style: dashed; }

Mixinはまた、パラメータのデフォルト値を指定することができます。include mixinにいるときは、パラメータを渡さない場合は、デフォルト値を使用します。パラメータを再転送すると、デフォルトの値が上書きされます。

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); } //       
h1 { @include sexy-border(blue, 2in); } //        

コンパイルされた:

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; }

キーワードのパラメータ
明示的なキーワードパラメータ方式の導入

p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); }

簡潔ではないように見えますが、もっと可読性が高いです。最大の利点は、任意の順序での参照が可能であることである。
可変パラメータ
一つのsに対して不確定な数のパラメータが許可されていることは非常に意味があります。例えば、box-show属性は複数の影を定義することができます。時々、あなたが必要な影の個数を確定できない場合があります。この場合はinclude large_textが必要です。

@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);
}

コンパイルされた:

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

可変パラメータはキーワードでも入力できます。

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

$value-map: (text: #00ff00, background: #0000ff, border: #ff0000); //   keywords($args)   ，
.secondary {
  @include colors($value-map...);
}

keywords（$args）function
コンパイルされた:

.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

.secondary {
  color: #00ff00;
  background-color: #0000ff;
  border-color: #ff0000;
}

sに他のものを導入することもできます。

@mixin wrapped-stylish-($args...) {
  font-weight: bold;
  @include stylish-($args...);
}

.stylish {
  // $width          "stylish-" 
  @include wrapped-stylish-(#00ff00, $width: 100px);
}

内容を伝えるブロックをmixinに渡します。
@contentを通じてコンテンツブロックを伝達する。

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

コンパイルされた:

* html #logo {
  background-image: url(/logo.gif);
}

変数範囲とコンテンツブロック
mixin外部で説明されたコンテンツブロックの変数スコープはmixin内部パラメータ、例えば下の列に示すように、グローバルスコープを指すことができない。

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { color: $color; }
}

コンパイルされた:

.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}