@mixin（ミックスイン）の使い方

現在PFのレスポンシブデザインを作成しています。 その際に@mixinを使用したいと考えているので、その内容について、紹介したいと思います。記事は以下のものを参考にさせていただきました。

@mixin（ミックスイン）の基本的な使い方

再利用したいスタイルを@mixin 名前 {}の形式で定義した上で、利用したい位置で@include 名前で呼び出します。

@mixin Box-width {
  width: 100%;
}
.box1 {
 @include Box-width;
 background-color: white;
}

コンパイルされたCSS

.box1 {
 width: 100%;
 background-color: white;
}

とても便利だと思います。今回は以上になります。