ミックスイン

Bootstrap Sassソースコードには60以上のミックスインがあり、mixins/ サブディレクトリのソースファイルに記述されている(一覧はGitHubリポジトリを参照)。これらはBootstrapライブラリの構成部品として用いられているが、これらを利用して新しいスタイルを生成するのに利用することもできる。

(パーシャルのインポートに @import "{パーシャル名}"; を用いるのに対し) ミックスインを利用する場合は @include "{ミックスイン名}"; を用いる。

実際の例を示す。Bootstrapが用意しているミックスインの中にresizable($direction)があり、これを追加することで対象要素をサイズ変更可能に設定することができる(mixins/_resize.scssで定義、だが実はBootstrapライブラリのどこにも使われていない)。次のコードはその応用で .resizable という名のカスタムユーティリティクラスを作成している。

// 先にBootstrapをインポート
@import "bootstrap/scss/bootstrap";

// ユーティリティクラスを作成(縦横ともサイズ変更可能にする)
.resizable {
  @include resizable(both);
}

デモ: 次のアラート div.alert.alert-success.resizable は .resizable ユーティリティクラスの応用例で、縦横ともサイズ変更できる。さらに内部のパラグラフも .resizable でサイズ変更できるようにしてある。