LESSにおけるミックスイン

このレッスンでは、あるクラスを別のクラスの中に含めることを可能にするミックスイン（混合）について学びます。これが何であり、どのように使うのかを見ていきましょう。

本質的に、ミックスインとは一つのクラスを別のクラスの中で使用することで、あるクラスが特定のコードの断片、つまり私たちが多くの場所で使用できるひな形として機能します。

これはなぜ便利なのでしょうか？純粋なCSSでは、必要な場所すべてにこのひな形コードを記述しなければなりませんが、LESSではそれを一箇所に書いておき、必要なコードの場所でそれを呼び出すことができます。

例を見てみましょう。次のようなクラスがあるとします：

styles.less.mix {
  width: 100px;
  height: 100px;
}

このクラスをミックスインとして使用してみましょう：

styles.lessp {
  .mix;
  color: red;
}

結果、コンパイル後には、段落に私たちのクラスのスタイルが適用されます：

styles.cssp {
  width: 100px;
  height: 100px;
  color: red;
}

styles.less.mix {
  color: white;
  background: black;
}

p {
  .mix;
  width: 300px;
}