@mixin / @include

@mixin/@includeについて
関連リンク

@mixin/@includeについて

@mixinと@includeはSCSSでコード再利用を効率化する機能です。
@mixinでスタイルを定義し、@includeで適用することで、重複を減らし保守性を向上させます。

@mixinとは？

@mixinは、よく使うスタイルのセットを「ミックスイン」という形でまとめて定義する機能です。
これにより、同じスタイルを何度も書かずに再利用できるため、効率的なコーディングが可能になります。

例：button-stylesという名前で定義

@mixin button-styles {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border-radius: 5px;
}

このように、@mixinの後に名前を指定し、{}内にスタイルを記述します。

@includeとは？

@includeは、定義したミックスインを実際に適用するために使用します。
以下のように、@mixinで定義したスタイルを必要な場所で呼び出します。

例：@mixinで定義したbutton-stylesを適用

.btn {
  @include button-styles;
}

.btn--primary {
  @include button-styles;
  background-color: #dba134;
}

このように、適用したいセレクタの中に記述して使用します。

コンパイル後のCSS例

/* コンパイル後のCSS */
.btn {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border-radius: 5px;
}

.btn--primary {
  padding: 10px 20px;
  background-color: #dba134;
  color: white;
  border-radius: 5px;
}

@mixinを使うと、CSSにコンパイルされた時に個別のスタイルとして出力されます。
つまり、スタイルはそのまま出力され、必要な場所に適用されます。

引数を使ったミックスイン

@mixin では、引数を指定することができ、スタイルを動的に変更することができます。
引数を使うことで、スタイルをより柔軟に、強力に定義することができます。

例：色とサイズを引数として受け取るミックスイン

@mixin button-styles($bg-color: #3498db, $text-color: white, $padding: 10px) {
  padding: $padding;
  background-color: $bg-color;
  color: $text-color;
  border-radius: 5px;
}

上記のように引数 $bg-color、$text-color、$padding を使って、背景色、文字色、パディングを柔軟に変更することができます。

デフォルトの値を使用する場合 デフォルト値を設定した場合、@include を使ってミックスインを呼び出す際に引数を省略することができます。

.button-primary {
  @include button-styles; // デフォルト値が使われます
}

この場合、背景色は #3498db、文字色は white、パディングは 10px となります。

引数を指定する場合 引数を指定すると、デフォルト値を上書きできます。

.button {
  @include button-styles($bg-color: #e74c3c, $padding: 15px);
}

この場合、背景色は #e74c3c、パディングは 15px に変更され、文字色はデフォルトの white が適用されます。

@mixinでデフォルトの値を設定した場合、変更がない場合は引数を省略して@includeでミックスインを呼び出すことができます。
また、一部のスタイルを変更したい場合は、引数を個別で指定することができます。

以上が、「@mixin / @include」についての説明でした。

次のステップで、「@extend」について説明していきます。

@mixin / @include

@mixin/@includeについて

@mixinとは？

@includeとは？

引数を使ったミックスイン

関連リンク