2011-09-27今回は@mixinについてです。Mixinはスタイル(規則集合や宣言)を定義し、それを再利用することができます。定義したMixinは@includeでインクルードして使用します。Mixinには引数を渡すことができます。Mixinの利用例clearfix用のMixinを例に説明します。Mixinを定義します。}}これをインクルードして利用します。clearfix;}これをコンパイルすると下記のようになります。both;}簡単だし、コード管理も楽ですね。別のセレクタにも同じコードを適用する場合、@extendを利用することも検討してください。.clearfix;}これをコンパイルすると下記のようになります。both;}セレクタをグループ化して出力されるので、セレクタごとにコードが展開される@mixinよりも全体のコード量を減らすことができます。引数について引数はMixinの中で変数として使うことができ、CSSのプロパティやプロパティの値、@ifの条件式などに利用することができます。下記は引数を伴うMixinの例です。}}引数を複数指定する場合は,(カンマ)で区切ります。$var2だとエラー)。初期値が指定されていない引数はインクルード時に値を指定しないとエラーになります。前述のsample-mixinを例にします。Mixinの引数の順番通りに指定する単純にMixinの引数の順番通りに値を指定します。引数のキーワード($var1や$var2など)を記述する必要がないのでタイプ数が少なくてすみます。コードを後で見返したときにMixinによっては引数の値が何なのかが分かりづらいかもしれません。true);}特定の引数だけ指定する$var2は初期値を利用して、$var3の値だけ指定します。true);}キーワードを使い、順不同で指定する$var3を記述した後に$var2を記述します。引数のキーワードを記述すると引数の順番が関係なくなるようです。コードの見通しが悪くなりそうなので使わないほうが良さそうですが...。下記のように$var1を最後に記述してもエラーにはなりません。100px);}Mixinを使えば作業をかなり効率化することができますが、複雑すぎると運用・管理のコストを増やしてしまう可能性があるのでバランスを考慮して利用したいですね。