ミックスインとインクルード

Sass のミックスインは、再利用可能な CSS 宣言のブロックです。通常のクラスとは異なり、パラメーターを受け取れるため、コピー＆ペーストよりも柔軟に利用できます。@mixin で定義し、@include で使用します。

パラメーターのないミックスインは、単なる再利用可能なブロックです：

ミックスインに値を渡して、出力をカスタマイズします：

ミックスインの引数にデフォルト値を設定すると、引数を省略できるようになります：

明確さを高めるため、名前を指定してミックスインの引数を渡します：

ミックスインは @content を使用してコンテンツのブロックを受け取れます。渡されたブロックは、@content が現れる位置に挿入されます：

メディアクエリでよく使われるミックスインです：

一貫したタイプスケールを実現するテキストスタイル用のミックスインです：

ミックスインは CSS 宣言を出力し、関数は値を返します。複数の CSS ルールを出力したい場合はミックスインを、計算された単一の値が必要な場合は関数を使用してください。

ミックスインが多すぎると、デバッグが難しい抽象的な間接参照が生じます。パターンが 3 回以上再利用される場合にのみミックスインを作成してください。一度しか使わないスタイルは、CSS に直接記述してください。

Sass のミックスイン定義内にある @content の役割は何ですか？

@mixin でミックスインを定義し、@include で使用します。ミックスインはパラメーターを受け取り、デフォルト値を設定することもできます。@content を使うと、呼び出し元から CSS ブロックをミックスインに挿入できるため、メディアクエリヘルパーのようなラッパーパターンを実現できます。抽象化のオーバーヘッドを避けるため、複数回再利用されるパターンにのみミックスインを作成してください。