ミックスインの基本
予めスタイルの塊（セレクタ指定ではないためルールセットではない）を定義しておき、それを他の場所で呼び出して使えるようにする機能。「@mixin 定義名（≒関数名）;」で定義する。また、引数を指定することで定義したミックスインの値の一部を変更して使うといった処理を書くことも可能。定義したミックスインを呼び出す際は「@include 定義名」と記述する。
その他の使い方
ミックスイン名の直後に（）を書き、カッコ内に引数（変数）を書く。引数に初期値を定義することもできる。
引数はカンマ区切りで複数指定することも可能
text-shadowやbox-shadowなどCSSプロパティによってはカンマを使うものがある。仮引数をカンマ付きで定義する場合「@mixin shadow($value...)」のように可変長引数（VariableArgument）を使用する
ミックスインもスコープを持つためルールセット内で書くとその中でしか利用できなくなる。
@contentは、ルールセットやスタイルなどのコンテントブロックをミックスインに渡す機能。
text-shadowやbox-shadowなどCSSプロパティによってはカンマを使うものがある。仮引数をカンマ付きで定義する場合「@mixin shadow($value...)」のように可変長引数（VariableArgument）を使用する
- @mixin shadow1 { ~ }
- @mixin shadow-1 { ~ }
- @mixin shadow_1 { ~ }
- @mixin 影 { ~ }
- @mixin ｓｈａｄｏｗ { ~ }
- @mixin _shadow { ~ }
- @mixin -shadow { ~ }
- @mixin 01shadow { ~ }
- @mixin shadow@2 { ~ }
- @mixin --shadow { ~ }
コメントを残す